Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Layout knocked out in IE

    Hey,

    I tried learning web design a few years ago, and I think that when it got to trying to make layouts work in both Firefox and IE, I just gave up because I thought the whole thing was stupid. I'm trying to get past that point now though because I really want to learn this now, so I'm going to have to deal with these problems, and see if I can find the hacks to fix them whenever they surface.

    So having just got back to this point and having a flashback of how far I got a few years ago, I'm back here asking if anyone can help me out.

    Basically, here's the layout, which is working fine for me so far in firefox, but when you switch to IE the whole thing falls apart : http://uk.geocities.com/raoxyu/

    All I'm hoping for is that someone can help me get that working in both browsers by either adding, taking away, or modifying part of the CSS, which I'm assuming is causing the problem.

    Here's the CSS and HTML :

    body {
    background:#000;
    font-family: lucida console;
    font-size: 12px;
    }

    #wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 800px;
    color: #fff;
    background: url("pagecont01.jpg");
    }

    #wrapper2 {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;
    color: #fff;
    background: #000;
    }

    #header {
    margin: 0px auto;
    background: url("headertest.jpg");
    height: 100px;
    }

    #added {
    padding:0px;
    margin:0px auto;
    height:30px;
    background:#000;
    }


    #leftsidebar {
    float: left;
    width: 150px;
    padding-left: 10px;
    }

    #rightsidebar {
    float: right;
    width: 150px;
    padding-left: 10px;

    }

    #content {
    float: left;
    width: 364px;
    padding-left: 10px;
    }

    #footer {
    clear: both;
    height: 30px;
    text-align: center;
    font-size: 0.8em;
    }

    #navcontainer
    {
    margin: 10px 0 0 30px;
    padding: 0;
    height: 20px;
    }

    #navcontainer ul
    {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }

    #navcontainer ul li
    {
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    #navcontainer ul li a
    {
    background: #000;
    width: 78px;
    height: 18px;
    border-top: 1px solid #f5d7b4;
    border-left: 1px solid #f5d7b4;
    border-bottom: 1px solid #f5d7b4;
    border-right: none;
    padding: 0;
    margin: 0 0 0px 0;
    color: #ccc;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    }

    #navcontainer ul li a:hover
    {
    color: #930;
    background: #f5d7b4;
    }

    #navcontainer a:active
    {
    background: #c60;
    color: #fff;
    }

    #navcontainer li#active a
    {
    background: #c60;
    border: 1px solid #c60;
    color: #fff;
    }




    <html>
    <head>
    <title>Untitled</title>

    <link rel=stylesheet href="style.css" type="text/css" media=screen>

    </head>

    <body>

    <div id="wrapper">
    <div id="wrapper2">
    <div id="header">
    </div>

    <div id="added">
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="art/sitepage.html">art</a></li>
    <li><a href="web_design/sitepage.html">design</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>

    </div></div>

    <div id="leftsidebar">
    <p>left content</p>

    </div>

    <div id="content">
    <p>center content</p>
    </div>

    <div id="rightsidebar">
    <p>right content</p>
    </div>
    <div id="footer">
    <p>footer - <a href="">link</a> | <a href="">link</a> | <a href="">link</a></p>
    </div></div>
    </div>



    </body>
    </html>



    If anyone can help with this I'd be really grateful, because even though I'm fine looking for CSS and HTML things at the moment, I'm still stopped as soon as I get to the cross-browser part. Ah and while I'm here, if anyone has any links that teach you about this type of problem that'd be great aswell, because I can't see me getting anywhere in design without learning about this aspect too. Gah this part has to be the worst thing about web design, surely.
    Last edited by Dante; 07-03-2007 at 05:27 AM. Reason: cleaned css and html up

  • #2
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Arghh, I felt annoyed that I'd just posted back here without trying to find the problem myself, so I went through the code for a while and it looks like it's down to this part in the CSS :

    body {
    background:#000;
    font-family: lucida console;
    font-size: 12px;
    }

    #wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 800px;
    color: #fff;
    background: url("pagecont01.jpg");
    }

    #wrapper2 {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;
    color: #fff;
    background: #000;
    }

    #header {
    margin: 0px auto;
    background: url("headertest.jpg");
    height: 100px;
    }

    #added {
    padding:0px;
    margin:0px auto;
    height:30px;
    background:#000;
    }


    #leftsidebar {
    float: left;
    width: 150px;
    padding-left: 10px;
    }

    #rightsidebar {
    float: right;
    width: 150px;
    padding-left: 10px;

    }

    #content {
    float: left;
    width: 364px;
    padding-left: 10px;
    }

    #footer {
    clear: both;
    height: 30px;
    text-align: center;
    font-size: 0.8em;
    }




    Can anyone see something there, or the absence of something that's causing this to crash in IE? I've edited the first post aswell, after cleaning things up a bit.

    Ah and to clarify a bit : #wrapper is a second container I added to put some extra art onto the sections outside each sidebar. So #wrapper2 was from the original template I started with, that just used a container for a fixed 3 col layout. Then #added is a small section I made to add the horizontal links.

    Thanks if you can help anyway.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Please use [code]your code here[/code] tags to post your code.

    Then get a different webhost that doesn't put ads on your page, www.freehostia.com is a decent free host with no ads.

    After getting another webhost make sure you add a doctype to your page.

    Read the sticky about doctypes to find out more. I suggest this one.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Please use [code]your code here[/code] tags to post your code.

    Then get a different webhost that doesn't put ads on your page, www.freehostia.com is a decent free host with no ads.

    After getting another webhost make sure you add a doctype to your page.

    Read the sticky about doctypes to find out more. I suggest this one.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    You rule, thanks! I had no idea you could get hosting with no ads at all on it, so you've saved me some money on hosting which I was going to pay for shortly, and it looks like yahoo geocities had messed my page up, because it now works fine in IE!

    http://www.novabird.co.uk/

    Thanks again, this really has been an awesome help.

    edit : ah, and thanks for the code tag and doctype info aswell.
    Last edited by Dante; 07-03-2007 at 05:55 PM. Reason: addition

  • #5
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Guh, I'm back again with an IE problem.

    This page that I've been designing looks fine to me in firefox : http://www.novabird.co.uk/

    But in IE it's not showing the background image, and it's also knocking the 3 central comumns all over the place, so I was wondering if anyone could help me out. Here's the IE CSS code :

    Code:
    body {
    background:#7996A1;
    font-family: lucida console;
    font-size: 12px;
    color:#D9D9D9;
    margin:0;
    
    }
    
    #wrapper {
    	text-align: center;
    	margin:0px auto;
    	padding:0px;
    	border:0;
    	width: 850px;
            background: url("nbcont01.jpg");
    }
    
    #wrapper2 {
    	text-align: center;
    	margin:0px auto;
    	padding:0px;
    	border:0;
    	width: 750px;
            background: url("gradientcont.jpg");
    }
    
    #header {
    	margin: 0px auto;
    	background: url("altnbh2.jpg");
            height: 200px;
    }
    
    #added {
            margin-top: -5px;
            height:30px;
            background: url("gradientcont.jpg");
    }
    
    #leftsidebar {
            overflow: hidden;
    	margin: 0px auto;
    	float: left;
    	width: 150px;
            text-align: center;
            padding-top: 20px;
            border:0;
    }
    
    #rightsidebar {
            overflow: hidden;
    	margin: 0px auto;
    	float: right;
    	width: 150px;
            text-align: center;
            padding-top: 20px;
            border:0;
    }
    
    #content { 
            overflow: hidden;
    	margin: 0px auto;
            float: left;
    	width: 450px;
            padding-top: 100px;
            text-align: center;
            border:0;
    }
    
    #footer {
    	clear: both;
            height: 30px;
            text-align: center;
            font-size: 0.8em;
            padding-top: 20px;
            
    }
    
    #navcontainer
    {
    margin: 10px 0 0 30px;
    padding: 0;
    height: 20px;
    }
    
    #navcontainer ul
    {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }
    
    #navcontainer ul li
    {
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
    }
    
    #navcontainer ul li a
    {
    background: #627A84;
    width: 78px;
    height: 18px;
    padding: 0;
    margin: 0;
    color: #ccc;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    }
    
    #navcontainer ul li a:hover
    {
    color: #ccc;
    background: #9a32cd;
    }
    
    #navcontainer a:active
    {
    background: #c60;
    color: #fff;
    }
    
    #navcontainer li#active a
    {
    background: #c60;
    border: 1px solid #c60;
    color: #fff;
    }
    
    a:link {color: #d9d9d9; text-decoration: underline; }
    a:active {color: #d9d9d9; text-decoration: underline; }
    a:visited {color: #d9d9d9; text-decoration: underline; }
    a:hover {color: #d9d9d9; text-decoration: none; }
    
    #altlink a:link, #altlink a:visited {
    background: url("altlink.jpg");
    }

    I get that I might have a good few things wrong there, but I'm still new and no good at getting things working in IE. Can anyone see anything that might be causing the problems? I'm pretty frustrated because I'd just got the design finished and was going to add content, then I checked the page in IE....

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Validate your HTML first. You can't have a div randomly inside of a list.
    See your errors here.

    After doing that then instead of floating your #rightsidebar to the right float it to left. The background should show up.
    Last edited by _Aerospace_Eng_; 07-13-2007 at 05:58 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, I had it validated aswell before, both CSS and HTML showed up no errors. Can you see how the background gradient makes the last link look out? I put the extra div in for that, so that I could link to another background image behind the link that made it match. I took it out of the IE code for now, but unless I can find a different way of putting that image behind the about link to the right, I think I'm going to leave it, because I'd rather have the page design look right than the thing validating but looking worse.

    Thanks for the help with the right sidebar and floating it to the left aswell, but I tried it and nothing happened. It's pretty annoying really because IE doesn't seem to be able to work very well at all with CSS, and I can now see 4 errors :

    1. When you put a border on the 3 content columns, you can see that they're knocked out.

    2. The content isn't centered in the main content middle column.

    3. No background image.

    4. If you look carefully at the header and nav section (#added) it's about 1 pixel left of the columns below it, and I'm stuck on that too.

    It'd be a lot easier if Microsoft would just listen to people telling them how much of a mess the browser is, and make the changes that are needed.

    also : CSS validates, but HTML is saying "Error Line 20 column 67: there is no attribute "BORDER"." along with the div problem. Well I had to put border="0" in because if I didn't, the header image that's also the link back to the mainpage has a 1 or 2 pixel white border on it, so I added that to take it out.
    Last edited by Dante; 07-13-2007 at 06:26 PM. Reason: added something

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this for your CSS
    Code:
    html, body {
    background:#7996A1;
    font-family:'lucida console', Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#D9D9D9;
    text-align:center;
    margin:0;
    padding:0;
    }
    
    a img {
    border:0;
    }
    
    #wrapper {
    text-align: left;
    margin:auto;
    padding:0px;
    border:0;
    width: 850px;
    background: url(nbcont01.jpg);
    }
    
    #wrapper2 {
    text-align: left;
    margin:auto;
    padding:0px;
    border:0;
    width: 750px;
    background: url(gradientcont.jpg);
    }
    
    #header {
    margin: 0px auto;
    background: url(altnbh2.jpg);
    height: 200px;
    }
    
    #added {
    padding:0px;
    margin:0px auto;
    height:30px;
    background: url(gradientcont.jpg);
    }
    
    #leftsidebar {
    float: left;
    width: 150px;
    text-align: center;
    padding-top: 20px;
    }
    
    #rightsidebar {
    float: left;
    width: 150px;
    text-align: center;
    padding-top: 20px;
    }
    
    #content {
    float: left;
    width: 414px;
    padding-left: 20px;
    padding-top: 100px;
    text-align: center;
    }
    
    #footer {
    clear: both;
    height: 30px;
    text-align: center;
    font-size: 0.8em;
    padding-top: 260px;
    }
    
    #navcontainer {
    margin: 10px 0 0 0;
    padding: 0;
    height: 20px;
    }
    
    #navcontainer ul {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }
    
    #navcontainer ul li {
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
    }
    
    #navcontainer ul li a {
    background: #627A84;
    width: 78px;
    height: 18px;
    padding: 0;
    margin: 0;
    color: #ccc;
    text-decoration: none;
    display: block;
    text-align: center;
    font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    }
    
    #navcontainer ul li a:hover {
    color: #ccc;
    background: #9a32cd;
    }
    
    #navcontainer a:active {
    background: #c60;
    color: #fff;
    }
    
    #navcontainer li#active a {
    background: #c60;
    border: 1px solid #c60;
    color: #fff;
    }
    
    a:link {
    color: #d9d9d9;
    text-decoration: underline;
    }
    
    a:active {
    color: #d9d9d9;
    text-decoration: underline;
    }
    
    a:visited {
    color: #d9d9d9;
    text-decoration: underline;
    }
    
    a:hover {
    color: #d9d9d9;
    text-decoration: none;
    }
    
    #altlink a:link, #altlink a:visited {
    background: url(altlink.jpg);
    }
    Border isn't a valid attribute in HTML Strict. You need to use CSS instead.
    Code:
    a img {
    border:0;
    }
    I've implemented this in the above CSS. You can now remove it from your image element.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the border code, I got that taken out and put it into CSS, but the page still looks about the same in IE, so I think I might have to try building the page up again from scratch and seeing what's knocking it out. Then if I can't get anything I might try another way of setting the page out, or even move to a different design or something for IE.. Will post back if I find out what it is.

  • #10
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry to double post, but I think I've found the main problem after using white borders to make everything show up :

    #leftsidebar, #rightsidebar, and #content are all floating left from #wrapper, and completely ignoring #wrapper2. So all I'm hoping for now is that anyone here knows of a bit of code for IE that will make the 3 columns sit inside #wrapper2, without knocking anything else out. Does anyone know how to do that please?
    Last edited by Dante; 07-14-2007 at 11:16 AM. Reason: quick edit

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Sounds like you need to clear your floats.
    http://positioniseverything.net/easyclearing.html

    Tip: Code for Firefox tweak for IE. If you do the opposite your mistake will bite you in the butt later.

    You CAN edit your own posts you know?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah sorry, should've put those both in one post, my bad. Thanks for the link though, I'll see if I can get my head around it and add the right thing to my code, and yeah I did code for firefox first, and have ended up trying to find the IE fixes now.

    Thanks again for the help!

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its just a matter of adding this after your floats
    Code:
    <div style="clear:both;"><!----></div>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    New Coder
    Join Date
    Jan 2004
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah thanks, I'll make sure to keep that in mind if I get the same type of problem anywhere else. After testing the page again though I just found that it was the added div for the background image I had on 1 link that had knocked it out. I should've gone back and checked that the first time you mentioned it, but I had no idea that an added div in html would make the page go so insanely bad in IE. xD

    So I'll have to check out how to get that image for the last link some other way, but thanks for the help, because I'd have been baffled with trying to work this out otherwise.


  •  

    Posting Permissions

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