Click to See Complete Forum and Search --> : IE problem
Ashcrapper
06-01-2005, 07:43 AM
Hi,
Wondering if anyone can help me out here, still trying to make the switch to css-p but havent quite got there yet, so im currently trying to make a site using tables for layout but trying to keep it as clean as possible.
If you look at the page ive linked to, in FF it looks how I want it, in the section at the bottom with the form in and the two headers (How do I get Jobs4Nurses? and Look up your address) its lines up how I want it to. If you look at the same page in IE though you will see its not.
Can anyone help me work out why?
Any help is really appreciated, thanks,
Ash
http://www.jobs4nurses.co.uk/GetJ4N/getJ4N1.asp
AdamBrill
06-01-2005, 08:39 AM
I think I'm missing the problem. I'm using IE6 and everything looks the same as in FF except for the text-size.
Ashcrapper
06-01-2005, 09:01 AM
Look at the bottom section where the form is, in IE, the orange titles are about 20 pixels higher up, in FF they line up with the top of the grey line that splits the text from the form. Thats how I want it in IE.
Cheers,
Ash
For older versions of IE the table font-size must be specified, it is too big now.
The content is not centered either.
Ashcrapper
06-01-2005, 09:50 AM
what do i need to put for that then mate, hadnt checked but just looked now
h2 {font-size:1.7em; font-weight:normal; color:#F3961F;margin:0; padding:0; margin-bottom:5px;}
table {font-size:1em:}
Center contents:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {text-align:center;}
#container {margin:0 auto; width:850px; text-align:left; border:1px solid red;}
-->
</style>
</head>
<body>
<div id="container">
<div id="contents">contents</div>
</div>
</body>
</html>
Ashcrapper
06-01-2005, 10:46 AM
mate, your a genius!, thanks for that :D (the H2 bit)
just one thing, can you explain how that works just for future reference, or is it some stupid IE thing. as it makes no sense at all to me why you set two margin sizes
All browsers set default margins/padding foe header elements, unfortunatly each browser does it differently.
You either use * {margin:0; padding:0;}
or set them to your own requirements, or that of the w3c (http://www.w3.org/TR/REC-CSS2/sample.html)
You only set the bottom margin, without changing the others. It's a stupid browser thing.
ddbruno
06-07-2005, 12:43 PM
I happened to notice another problem on your page. The word couldn't is misspelled as could'nt.
"Registering for your free copy of Jobs4Nurses could’nt be easier "
Hope this helps.
kendokendokendo
06-07-2005, 12:45 PM
Another thing to note: the way IE renders HTML and text on the screen, the text size always looks a little bigger in it than another browser. So if you set the text size to 14px, it will look almost like 16px in IE.
kendokendokendo have you set the fonts the same in all your browsers?
kendokendokendo
06-07-2005, 08:38 PM
yes. I wouldn't call it a problem as much as I'd call it a simple difference because it's very easily fixed.
"Setting IE6 at text size of medium, and Firefox text-size at normla, IE renders fonts larger than Firefox. It appears IE6 is using 16px and FIrefox is using 14px."
-from http://joshuaink.com/blog/282/#c003485
In tests I have carried out there is no difference between FF (versions 1.0 and older) and IE.
There is a slight difference in line-height though.
In the link you gave the test refers to FF1.0.3 and IE6. I see no point in testing on minor updates.
Opera versions before version 8.0 have much smaller fonts compared to other browsers. Luckly this has been corrected in version 8.0