Cross browser Problem...

[aussieoc]

Ok so I've been having troubles view this on site correctly on different browsers. I designed it in deamweaver with firefox in mind. So the site was working fine in firefox but was not working right in Safari or IE. I have been working on, changing the div configurations and changing the image slices around and I have it working properly now in Firefox and Safari but IE is still a no go. Can someone please explain how I can make the site work properly in all 3 browsers. The url is below:

http://www.urbanstreetannouncement.c...SusFuture.html

Also, for some reason the font is different in IE as well, which I dont understand why.

Thanks,
Cesar
http://www.urbanstreetannouncement.com

[Kravvitz]

Please fix your HTML errors.

IDs should be unique. You could use a class instead.

<link rel="stylesheet" href="crstyle.css">

should be

<link rel="stylesheet" type="text/css" href="crstyle.css">

[aussieoc]

Ok thanks for the tip, but that did not solve the problem with the layout in IE. Also where should I been using classes instead of ID's, the text? Sorry if these are "simple" question but Im new at CSS.

Thanks again for the help,
Cesar

[Kravvitz]

For example, you have more than one element with the "h3" ID. You should use a class instead of an ID for those elements.

Validating doesn't always fix problems, but it does rule out X/HTML errors as the cause of the problem.

[aussieoc]

Ok so I changed the IDs to Classes but it did not solve to DIV position problem in IE : _ ( I do not undestand this, IE browser basically sucks but I want know how to fix this problem. Sorry if I am being annoying with this problem.

Thanks for the help,
Cesar

[JPnyc]

Did you try the !important hack?

[btree]

You may need to use some validators W3C validator , or smart validator from :

http://www.smartvi.com/sec.htm

[LJK]

Hi -
In IE 6._, it looks like "spacer.gif" is causing the big problem -
or maybe IE is choking on the margins:
#Spacer {
width: 86px;
height: 4px;
margin-top: -207px;
margin-left: 610px;
background-image: url(spacer.gif);
background-repeat: no-repeat;
}

Also noticed that the white text on blue is hard to read & gets cut off -
and the 'more' links in the green boxes are not uniform in spacing.
Good start of your design, though.

El

[Kravvitz]

Well one problem in IE is caused by it wrongly not allowing elements to have a height less than the line-height.

#Spacer	{
	width: 86px;
	height: 4px;
	font-size:3px;
	line-height:4px;
	margin-top: -207px;
	margin-left: 610px;
	background-image: url(spacer.gif);
	background-repeat: no-repeat; 
	}

[aussieoc]

Ok Kravvitz thanks for the input so far, I tried adding those two lines of code and now the Spacer div will not show in IE, still works fine under Firefox. Any other suggestions?? Would you think reslicing it a different manner would work?

Thanks again,
Cesar

[Kravvitz]

You're welcome

The problem in IE is caused by the height of #Content.

[aussieoc]

Ahh, that makes so much sense. Because in firefox the text is within the content box but IE it overflows so it probably messes up the hieght which in turn messes up the positioning of the boxes to the right of it.

Dude thanks again Ill have to work on it when I get back from work today,
Cesar

[Kravvitz]

You're welcome

Actually, it overflows in Firefox too. Firefox just handles overflowing text differently than IE -- IE wrongly expands the container.

[aussieoc]

Ok sweet, thanks to Kravvitz help I was able to make the layout work both in Firefox and IE. The problem was that the text was overflowing and the SPACER div needed the font-size and line-height code. I also got ride of some float attributes. But I still have another question : ) So I changed the font type and size to fit IE but the main Content box still display the text in different sizes. Is there a script code maybe that I can use to resize for the browser or should I just play around with different fonts until one works in both??

Thanks again everyone. This has help me out a great deal understand how exactly CSS works.

Cesar

[Kravvitz]

*sigh* Making the font size smaller is a bad solution. The web is not print. People are free to change the font size to whatever they want. You need to design layouts that can accomodate more than just the font size you set.