Bookworm9405

Hi all,

I have been coding from scratch my new website - a fairly big task for a newbie web designer. I have finally finished the main layout, and when I validated it at the w3 validation page, it said that I had no code errors in the XHTML. However, I think there is something wrong with my CSS code, as while the site displays correctly in Firefox, Opera, Safari, Netscape, and other Geko-based browsers (Camino, K-Melon, and yes, I know Opera/Safari aren't Gecko-based), it is completely messed up in IE 6 and 7. The two major problems are thus (pictures below):

1. The image 'sider1.jpg', a placeholder image on the top menu, always displays in its entirety, even when the screen resolution dictates it cannot. This offsets the menu, and makes the page layout look out of sync.

2. The main content (div #content) is displayed BELOW the left menu bar under a strange blue line - even though the float attribute is specified.

The page can be found here, the CSS code here. A picture of the site running in Firefox is here, the same page in IE 7 is here. Sorry for picture size, and the dithering - I needed to keep the filesizes low. I can post larger versions, as well as pictures in other browsers, if needed.

Thanks in advance for the help!

Bookworm



Re: Internet Explorer Web Development Site CSS 'float' and divs messed up in IE 6/7

Paarth

<img alt="" src="/site/img/sider1.jpg"/> specify the width that is required


#content 
{
text-align: center;
font-family:verdana, sans-serif, arial, geneva, helvetica;
float: right;
margin-left: 340px;
margin-right: 190px;
padding: 10px;

}


try and see, should fix the issue up to an extent
if sider1.jpg is there just for visual, use it as a background image.
hope that helps.






Re: Internet Explorer Web Development Site CSS 'float' and divs messed up in IE 6/7

Bookworm9405

Hi,

I'll make the changes to #content in a moment and see if they help.

The problem with specifying a width for the sider1 image is that it needs to be the length it actually is - so it displays correctly on resolutions such as 1680x1050 - but it also needs to be able to hide itself as it does on most browsers so that the page displays correctly in all resolutions. I will try it, however.

Thanks again Smile

Edit: Changing the float did not work - it only skewed the layout in Firefox as well.





Re: Internet Explorer Web Development Site CSS 'float' and divs messed up in IE 6/7

Paarth

i will take for granted that you are a css novice.
here is the code that should fix ur bg image....
#menutop {
background:transparent url(/site/img/back.jpg) repeat scroll 0%;
height:59px;
}








Re: Internet Explorer Web Development Site CSS 'float' and divs messed up in IE 6/7

Paarth

Bookworm9405 wrote:
Hi,

I'll make the changes to #content in a moment and see if they help.

The problem with specifying a width for the sider1 image is that it needs to be the length it actually is - so it displays correctly on resolutions such as 1680x1050 - but it also needs to be able to hide itself as it does on most browsers so that the page displays correctly in all resolutions. I will try it, however.

Thanks again

Edit: Changing the float did not work - it only skewed the layout in Firefox as well.


i think the change in float fixed the issue u had on IE7.
just add the code in my post above and the output on FF and IE7 should be identical.