...

View Full Version : Problem with positioning divs in IE...



rebeccajanet
10-24-2009, 07:43 PM
Hi, I am having an issue with my image map on my website. When I view it in firefox it looks great and is in the correct position, to the left, but when I view it in IE it is in the center of the page behind the rest of the content. I would love some help with this... I'm not the most experienced person so any ideas would be wonderful. Thank you :)

Here is the URL: http://www.spfdskateworld.com/version3

Becky

drhowarddrfine
10-24-2009, 08:19 PM
You're doctype is incorrect and puts IE into quirks mode. Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

rebeccajanet
10-25-2009, 06:12 AM
hmmm.... I tried that, and now all of the content is overlapped on the left side of the page... :confused:

SB65
10-25-2009, 12:34 PM
With a doctype added, which you do need if you want IE to behave, you need to explicitly state all your top and left positioning on your layout divs in pixels.

So for example:


<div
style="
top: 35;
left: 235;
position: absolute;
z-index: 1;
visibility: show;">


needs to be:


<div
style="
top: 35px;
left: 235px;
position: absolute;
z-index: 1;
visibility: show;">


Without these the browser will ignore the top and left settings, and hence the three layout divs all end up on top of each other.

rebeccajanet
10-25-2009, 06:26 PM
ok thank you!

rebeccajanet
10-25-2009, 06:35 PM
Ok... so that was a huge help and it works in IE and firefox now, BUT now for some reason all of the text is double spaced in both browsers, and I have no idea why and can't figure out how to get it back to single spacing...

VIPStephan
10-25-2009, 07:07 PM
<div
style="
top: 35px;
left: 235px;
position: absolute;
z-index: 1;
visibility: show;">


Just for the records: it must be visibility: visible;. “show” is not a valid value.

SB65
10-25-2009, 08:18 PM
now for some reason all of the text is double spaced in both browsers

Assuming you mean in the right hand pink column, this is due to the repeated:


<font face="arial" color="000000" size="5">

appearing at the start of each of the sections: No School Skate, Halloween Skate etc.

It's better not to use the <font> element at all as it is deprecated (http://www.htmlquick.com/reference/deprecated.html), and it would really be better to rewrite this section using <h2>, <h3> elements...and get rid of the table while you're at it.

If you don't want to do this, try removing the size="5" from these sections. Just leave it on the very top "Upcoming events".

rebeccajanet
10-26-2009, 05:40 AM
Well, it's not just the right side column, it's also the middle table, so I don't think that's the reason. I have to specify the font size because the line below it is a smaller size, and it alternates, so each new line has to specify the size.

It wasn't "double spaced" until I added the pixel clarification for the alignment of the tables... so I have no idea what is causing this. I just want it to go back to how it was =/

technica
10-26-2009, 06:22 AM
try removing the <p> tag that appears before the <font> tag.

In the html version of the page I can see.


<p align="left">
<font face="arial" size="2"> Welcome to the <b>Springfield Skate World</b> website!


Try removing the <p> tag. Also make sure you use proper HTML. like every open tab should have a closed tag.

Hope it helps

SB65
10-26-2009, 10:12 AM
Well, it's not just the right side column, it's also the middle table, so I don't think that's the reason.

That is the reason on your right hand column. You are setting font size = 5 for every paragraph, which is not affecting the font size of the text because you are setting this as well for each lot of text, but it is affecting the space between the lines. Try removing the size="5" bits.

Your middle column looks fine to me, not double spaced at all, it just looks like a nicely set out set of paras. Since this text is in a table, you could remove the <p> tags as technica suggests.

These problems you are now seeing are not as a result of adding the pixel positioning, but as a result of applying a doctype to the page, which is now making your page display as it is written (which might not be exactly as you want it to look).

rebeccajanet
10-27-2009, 06:30 AM
thank you for the clarification. finally got it figured out :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum