PDA

View Full Version : Layout issues driving me insane...!


borderfox
05-02-2007, 11:53 AM
Can anyone shed any light as to what i'm doing wrong here (http://www.energysurveyor.net/index_b.html). It displays fine in Firefox but when in Internet Explorer, its all over the place.

domedia
05-02-2007, 01:07 PM
There's some basic structure errors you have to fix first (my guess is the problem will be solved once the structure is fixed). Run the page through a validator and you'll see what I mean.

borderfox
05-02-2007, 02:15 PM
Thanks for your post. I am in a world of pain here. I ran the validator and 'fixed' some of the errors - which left me with 8 that I just can't fathom here (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.energysurveyor.net%2Fin dex_b.html). However, following the validators recommendations has left me with even more trouble - as the dhtml/javascript menu (and list where javascript is disabled) is broken.

Is the first error the main problem and how do I go about fixing it?

CSS validation throws up the error below. If it won't allow a four digit color, is there another way of expressing this colour in 3 or 6 digits?
URI : http://www.energysurveyor.net/main.css

36 #content Value Error : color (http://www.w3.org/TR/REC-CSS2/colors.html#propdef-color) 3333 is not a valid color 3 or 6 hexadecimals numbers#3333 65 #footer Value Error : color (http://www.w3.org/TR/REC-CSS2/colors.html#propdef-color) 3333 is not a valid color 3 or 6 hexadecimals numbers#3333

domedia
05-02-2007, 03:15 PM
-Four digit hex numbers don't exist. Like the error message said, use 3 or 6. (#666)
-You're declaring document as XHTML, while writing HTML.
-You didn't close the HEAD tag..

borderfox
05-02-2007, 04:15 PM
Ok, I can ditch the other page and work off a clean page (validates 100%) here (http://www.energysurveyor.net/index_a.html). However, its still out of synch in IE. The right column is pushed down below the rest of the page. Its under the influence of the css sheet pasted below.
Any ideas on what I have done to break this page?




padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #00AFA8;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #00AFA8;
border: 1px solid #ccc;
background: #E7DBD5;
padding: 10px;
height: 370px;
width: 195px;
float: left;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
}
#content {
float: left;
color: #3333;
border: 1px solid #ccc;
background: #F2F2E6;
padding: 10px;
height: 370px;
width: 456px;
display: inline;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
}
#rightcolumn {
color: #00AFA8;
border: 1px solid #ccc;
padding: 10px;
height: 370px;
width: 195px;
float: left;
background-color: #E7DBD5;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
text-align: center;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
text-align: center;
}

domedia
05-02-2007, 04:52 PM
Yeah, it how IE interprets the box model. We have a tutorial on it here:
http://www.dreamweaverclub.com/css-box-model.php

borderfox
05-02-2007, 10:45 PM
Its been frustrating but I'm almost there...just need to get over the line to show that my efforts may not have been in vain today.

I have rebuilt the page here (http://www.energysurveyor.net/index_c.html) and put it through a validator and it passes the test for xhtml 1.0 strict.

It displays fine in Firefox. It displays fine in IE with Active X disabled.
However, in IE with Active X switched on - the page is rendered with
the 'right column' pushed below the rest of the page.
I can reduce the 'content' div from 456 to 450 to accomodate this - but then it looks slightly out of synch with firefox or IE without active X.

Does anyone know why this happens? What can I do to fix it?

domedia
05-03-2007, 12:39 PM
padding:10px;
width:195px;

You're still not fixing the box model for IE, the link above (the tutorial) explains.

borderfox
05-03-2007, 03:10 PM
I'm still having difficulty getting my head round this but will have another look at it tonight as I'm at work right now.
My point would be that it will render correctly in both IE & Firefox if the javascript menu wasnt there.
The tutorial refers to IE 5 - and that from IE 6 onwards, its not a problem. But this has been tested on IE 6 - and its on that with javascript enabled that theres a problem?
If it is a case of adding that code, would it go on the css page or on the xhtml page?

domedia
05-03-2007, 03:53 PM
It would go whereever your CSS is :)

borderfox
05-07-2007, 10:42 AM
The only way I can manage to work around this is to make the 'right hand column' -> 'float = right'. It works ok now for firefox/IE6 & IE7. IE 5.5 doesn't look all too hot. It accounts for 1.5-2% of my visitors. I'm at the limit of my current abilities and will have to live with it I suppose.