...

View Full Version : CSS Layout knocked out in IE



Dante
07-03-2007, 03:08 AM
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. :rolleyes:

Dante
07-03-2007, 06:24 AM
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.

_Aerospace_Eng_
07-03-2007, 06:52 AM
Please use
your code here 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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Dante
07-03-2007, 06:54 PM
Please use
your code here 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.

<!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. :thumbsup:

edit : ah, and thanks for the code tag and doctype info aswell.

Dante
07-13-2007, 06:48 PM
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 :



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....

_Aerospace_Eng_
07-13-2007, 06:53 PM
Validate your HTML first. You can't have a div randomly inside of a list.
See your errors here (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.novabird.co.uk%2F).

After doing that then instead of floating your #rightsidebar to the right float it to left. The background should show up.

Dante
07-13-2007, 07:16 PM
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. :confused:

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. :rolleyes:

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.

_Aerospace_Eng_
07-13-2007, 08:25 PM
Try this for your CSS

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.

a img {
border:0;
}
I've implemented this in the above CSS. You can now remove it from your image element.

Dante
07-14-2007, 11:15 AM
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.

Dante
07-14-2007, 12:15 PM
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?

_Aerospace_Eng_
07-14-2007, 12:29 PM
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?

Dante
07-14-2007, 12:40 PM
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!

_Aerospace_Eng_
07-14-2007, 01:00 PM
Its just a matter of adding this after your floats

<div style="clear:both;"><!----></div>

Dante
07-14-2007, 04:12 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum