PDA

View Full Version : CSS - only working in IE



Bv202
Apr 11th, 2010, 08:28 PM
Hi,

I'm trying to finish up a site we've bought in the past. The URL is: http://www.rsnl.eu/beta

I'm trying to add an advertisement in the footer and this works fine in IE, but in other browsers, it adds a lot of "black space":
http://img402.imageshack.us/i/bugbb.png/

I have absolutely no clue how to fix this. Could anyone please have a look and help me getting this fixed?

Thank you very much,
Bv202

abduraooft
Apr 12th, 2010, 09:49 AM
There are some errors in your markup (http://validator.w3.org/check?uri=http://www.rsnl.eu/beta/pages/index/), try to fix them first.

Bv202
Apr 12th, 2010, 10:19 AM
Hi,

I have changed to doctype to transitional so I could use the iframe. There are no errors now.

drhowarddrfine
Apr 12th, 2010, 01:18 PM
New web pages have no business using a transitional doctype. Change it to strict and revalidate.

You say you checked it in Dreamweaver but Dreamweaver typically uses IE as its browser. IE should never be used to initially check how things work on the web. Always use a modern browser, anything but IE, to test your markup. The reasons are evident in the fact that your page doesn't work in any modern browser.

Bv202
Apr 12th, 2010, 07:13 PM
Hi,

I didn't use Dreamweaver. The site actually worked fine until I added the ad. I really need to have that ad (our hosting = sponsor), so I can't just remove it. I didn't test it in IE, I tested in Firefox and it gives these problems. It only works in IE (I know IE is likely rendering it wrong), but I need to get it to work in other browsers.

Thanks

Excavator
Apr 12th, 2010, 07:50 PM
Hello Bv202,
Good job on validating :thumbsup:

Floats do not work as expected if you don't specify their width.
Try making these changes highlighted in red to your CSS -
/* FOOTER */
#footer {
width: 884px;
height: 110px;
background: url( 'http://www.rsnl.eu/beta/templates/rsnl/images/footer.png' ) no-repeat;
color: #000000;
font-size: 11px;
}

#footer_left {
width: 150px;
float: left;

margin-top: 70px;
margin-left: 35px;
}
#footer_left a {
color:#000000;
}

#footer_middle {
width: 500px;
float: left;

margin-top: 45px;
margin-left: 60px;
}

/*#footer_right {
float: left;

margin-top: 70px;
margin-left: 210px;
}*/

drhowarddrfine
Apr 12th, 2010, 08:17 PM
I didn't use Dreamweaver.
Sorry, Criss-crossed threads. Just back into town. Can't think straight.

Bv202
Apr 12th, 2010, 08:47 PM
Hey,

I've changed these things in the CSS code but there is no difference :(

Excavator
Apr 12th, 2010, 09:00 PM
Hey,

I've changed these things in the CSS code but there is no difference :(

You did not make all the changes I showed you. :eek:

Your markup does not have anything in #footer_right on that page. If you comment out that bit of CSS, like I showed you, then the other floats work.

I also mentioned how floats need a width to work properly.
What happens in your #footer when you follow that advice and give all three floats a width?
Keep in mind when you put three elements side by side with floats that their total width cannot exceed the width of their containing #footer.
margin/padding/border all count when adding up total widths - see the box model (http://www.w3.org/TR/CSS2/box.html).

Bv202
Apr 12th, 2010, 09:07 PM
Hey,

Omg, it worked - thank you VERY much!!

Where do you learn these things? I've followed some CSS tutorials which all explained how to use CSS and some positioning, but none of them explained IE hacks or these things.

Do you have any good books?

Excavator
Apr 12th, 2010, 09:15 PM
Where do you learn these things? I've followed some CSS tutorials which all explained how to use CSS and some positioning, but none of them explained IE hacks or these things.

Do you have any good books?

You can learn all you need right here in this forum. That's how I did it... never cracked a book on HTML, CSS or anything web related in my life.

Excavator
Apr 12th, 2010, 09:17 PM
Check out some good tutorials at
http://w3schools.com/
http://www.tizag.com/

Bv202
Apr 12th, 2010, 09:33 PM
Hi,

Okay, thank you very much :)