Firefox playing up?

Discussion in 'Web Design and Development' started by JavaWizKid, Feb 8, 2009.

  1. JavaWizKid macrumors 6502a

    Joined:
    Sep 18, 2008
    #1
    I've created a layout in css and it works in Safari, Chrome and IE but not Firefox. I thought IE was the odd one out. Anyway I seem to have narrowed it down. It's the logo in the top left, if it has a link on it it seems to move the margin a lot to the right. Try it out.

    Code:
    body
    {
    	margin: 0;
    	padding: 0;
    	text-align:left;
    	color: black;
    	font: medium Arial, Helvetica, Verdana,sans-serif;
    }
    
    ul, li
    {
        list-style-type: none;
    }
    
    #header
    {
    	margin-right: 10px;
    	margin-left: 10px;
    	border: 2px solid black;
    	position: relative;
    	filter:alpha(opacity=80);
    	opacity: 0.80;
    	height: 62px;
    	background-color: white;
    }
    
    #sidebarleft
    {
        float: left;
    	margin-left: 10px;
    	margin-top: 10px;
    	height: 600px;
    	border: 2px solid black;
    	position: relative;
    	filter:alpha(opacity=80);
    	opacity: 0.80;
    	width: 170px;
    	background-color: white;
    }
    
    #sidebarleft b
    {
    	position: absolute;
    	left: 0px;
    	right: 0px;
    	background: #d9eaff;
    }
    
    #sidebarleft a:link
    {
    	color: black;
    	text-decoration: none;
    }
    
    #sidebarleft a:visited
    {
    	color: black;
    	text-decoration: none;
    }
    
    #sidebarleft a:hover
    {
    	color: black;
    	text-decoration: underline;
    }
    
    #sidebarleft a:active
    {
    	color: black;
    	text-decoration: underline;
    }
    
    #sidebarleft ul
    {
    	margin: 0;
    	padding: 0;
    	border: 2px solid white;
    }
    HTML:
    <html>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- header start -->
    <div id = "header">
    <a href="index.htm"><img src="images/logo.png" align="left" height="61" width="262"></a>
    </div>
    <!-- header end -->
    
    <!-- sidebarleft start -->
    <div id="sidebarleft">
    <center><b><u>Navigation</b></u></center>
    <br/>
    <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="link1.htm">link1</a></li>
    <li><a href="link2.htm">link2</a></li>
    <li><a href="/link3/">link3</a></li>
    <li><a href="link4.htm">link4</a></li>
    
    </ul>
    </div>
    <!-- sidebarleft end -->
    </html>
    
    How can I make the code work in firefox as well?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Your HTML is missing a head and body tag, which are generally big issues. Also, in your CSS you have an extra } at the end. Makes sure to run an HTML validator on your code as it can often find problems you may miss.
     
  3. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
    #3
    That is only a bit of my code, the full code has the head bit but the same error still occurs. And the extra } was a typo.
     
  4. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
  5. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    Post the URL so we can view it in FF and other browsers and compare.

    For now I advise adding attribute "border=0" to your src for logo.png in the HTML and removing "position: relative" from #header in your CSS because you only specified margin and not top/left to position it relative to it's parent or a nearby element. Since you only included "a bit" of the HTML (your own words) it's impossible to help you with positioning without seeing the entire page and your layout.

    Next time just include the URL, we can get to your CSS and HTML.

    And what is the result of the HTML validation as angelwatt suggested and you apparently ignored?

    -jim
     
  7. JavaWizKid thread starter macrumors 6502a

    Joined:
    Sep 18, 2008
    #7
    I added the border=0 and it worked. Thanks so much!
     

Share This Page