SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with borders

    I've just started learning CSS and I am trying to make a page layout.

    The site looks fine in Opera 6 and NS 7, but the alignment of the banner/sidebox is off in IE 6 (see the attached file).

    Here's the code for my html file:

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="page.css">
    </head>
    <body>
    
    <img src="banner.jpg" id="banner">
    
    <div id="sidepanel">
    Side Panel
    </div>
    
    <div id="content">
    Content Here
    </div>
    
    <div id="sidebar">
    Side Bar
    </div>
    
    </body>
    </html>
    And the code of page.css:

    Code:
    #sidepanel {
    	width: 130px;
    	border-right: 1px #000000 solid;
    	position: absolute;
    	top: 120px;
    	left: 5px;
    }
    
    #sidebar {
    	width: 132px;
    	border-left: 1px #000000 solid;
    	border-right: 1px #000000 solid;
    	border-bottom: 1px #000000 solid;
    	background: url(blue.jpg);
    	color: #FFFFFF; 
    	position: absolute;
    	left: 635px;
    	top: 120px;
    }
    
    #content {
    	width: 490px;
    	position: absolute;
    	top: 120px;
    	left: 140px;
    }
    
    #banner {
    	width: 764px;
    	height: 110px;
    
    	position: absolute;
    	top: 10px;
    	left: 5px;
    }
    Under #sidebar, if I change width to 134px it looks fine in IE 6, but then the alignment problem pops up in Opera and NS.

    Can anyone see what I'm doing wrong?

    Thanks!
    Peter
    Attached Images Attached Images

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a DOCTYPE such as the one below to kick IE into standards mode (IE6 only):
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked! Thanks!

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to mention where to put the DOCTYPE, but I guess you figured that out. It should be the very first line(s) of your file.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually put the doctype in, but since I am just learning/developing right now I didn't think it made a difference in regards to how the page was drawn.

    Well, I just checked the site on IE 5. And the alignment problem is there again. Any idea if it can be fixed in IE 5?

    Thanks.

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by peternm22
    Any idea if it can be fixed in IE 5?
    Most likely not. IE5 doesn't have a standards support mode. You'll get some quirky CSS rendering in it.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Website design would be a lot easier if everyone used the same browser.

    IE makes up about 90% of the browsers in use. Unfortunately it's split between IE 5 and IE 6.

    Fortunately though, NS 4.xx is used less and less every day

    Peter

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by peternm22
    Fortunately though, NS 4.xx is used less and less every day
    Amen to that, brutha! I believe the verse reference can be found in the gospel of Standards, chapter 3, verse 27:
    Stds 3:27
    And the gospel of web standards must first be preached to all nations. Netscape 4 shall be banished from the land for ever and ever!
    That's actually Mark 13:10 for those who care. Well, kinda.

  9. #9
    SitePoint Enthusiast rreames's Avatar
    Join Date
    Jun 2002
    Location
    Iowa
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by peternm22
    Website design would be a lot easier if everyone used the same browser.

    IE makes up about 90% of the browsers in use. Unfortunately it's split between IE 5 and IE 6.

    Fortunately though, NS 4.xx is used less and less every day

    Peter
    A more acurate statement would be: "Web Site building would be a lot better if browser makers would use the same engine or at least support the standards in the same way."

    That way end users would have the choice of interface and features of the browser itself and not the rendering engine. Of course this also takes into consideration the non-desktop screen based graphical browsers, such as screen readers, pda and phone browsers etc, etc.

    That 90% may be in general, but it also depends on the site.



    Good luck with the alignment issue, you may just have to let the problem be in some browsers though.
    Apathetic Activist.
    reames.org


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •