Weborum Webmaster Forum > topic revisted :)

Weborum Webmaster Forum > Web Page Design > CSS

Daniel8_9_3

Apr 2 2005, 09:48 PM

ok i never really saw an answer as to what causes the gaps in IE explorer even when you specify the exact height for the <div> tag and the width all my stuff is fine in mozilla , opera, and firefox yet like Sthomas i get a small gap in IE explorer.

whats the cause of this?

Joe

Apr 3 2005, 10:13 AM

Please stop bumping threads Dan, they will get answered in due time

You have to take into consideration padding, margin, line-height and borders; all these would cause div's with exact widths and heights in one browser to be a slightly different size in another.

Daniel8_9_3

Apr 3 2005, 05:33 PM

CODE

well i didnt use any padding for the banner and thats where i got a gap in IE although mozilla is fine and so firefox.

i thought of putting it in as background-image instead to maybe solve the problem im trying that now.

Joe

Apr 3 2005, 05:37 PM

You do realise the actual size of that div will be W: 772px X H: 127px don't you?

Try setting padding to 0 and add line-height: 0px; also.

Daniel8_9_3

Apr 3 2005, 05:41 PM

what causes the extra 2 pixels?i'll try that and see what happens.

Joe

Apr 3 2005, 06:12 PM

The border ...

A 1 pixel border all the way around a 700x125 box would make the overall width 702 because 1 pixel on the left and one on the right ... same for top and bottom.

Daniel8_9_3

Apr 3 2005, 06:15 PM

i took all the borders off since the images have borders and their all an equal 770px im still working with it.

Daniel8_9_3

Apr 3 2005, 06:40 PM

ive tried all of the above and that wasnt it, could it be possible that ie renders a small spacing between each division tag, thats what the problem is between each dig tag theres a gap of about 3pixels or so. between every div tag

i tried 0padding and that didnt work and the line-height;0px; and that didnt seem to do it either.

this is the code for the div tags.

CODE

<div style="margin:0 auto;width:770px;height:125px;">
<img src="http://www50.brinkster.com/daniel/CD_bannner.jpg" alt="banner" />
</div>

<div id="navigation" style="margin:0 auto;width:770px;padding-top:3px;
padding-bottom:3px;background-image:url(http://www50.brinkster.com/daniel/CD8.png);">
<ul>

<li><a href="#">Introduction</a></li>

<li><a href="#">Personal</a></li>
<li><a href="#">Artwork</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">E-mail</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Free Stuff</a></li>
<li><a href="#">Friends</a></li>
</ul>

</div>

<div style="margin:0 auto;width:770px;height:33px;">
<img src="http://www50.brinkster.com/daniel/foot.png" alt="footer" />
</div>

<div style="margin:0 auto;width:770px;height:340px;">
<iframe src="http://www50.brinkster.com/daniel/iframe.html" width="99%" height="340px"
name="iframe" style="background-color:white;">
</iframe>
</div>

<div style="margin:0 auto;width:770px;height:90px;
background-image:url(http://www50.brinkster.com/daniel/foot1.png);background-repeat:no-repeat;">
<br />
<a href="http://www50.brinkster.com/daniel/iframe.html" target="iframe">about</a> |
<a href="http://www50.brinkster.com/daniel/iframe.html" target="iframe">about</a> |
<a href="http://www50.brinkster.com/daniel/iframe.html" target="iframe">about</a> |
<a href="http://www50.brinkster.com/danieliframe.html" target="iframe">about</a> |
<a href="http://www50.brinkster.com/daniel/iframe.html" target="iframe">about</a> |
<a href="http://www50.brinkster.com/daniel/iframe.html" target="iframe">about</a> |
<a href="http://www50.brinkster.com/daniel/iframe.html" target="iframe">about</a> |
<a href="http://www50.brinkster.com/daniel/iframe.html" target="iframe">about</a> |
<a href="http://www50.brinkster.com/daniel/iframe.html" target="iframe">about</a> |
<br />
<b>All work contained here unless otherwise noted is the copyrighted property of Collado Designs
2005</b>
</div>

Joe

Apr 3 2005, 06:56 PM

Post the link to your page, I'll take a proper look.

Daniel8_9_3

Apr 3 2005, 06:58 PM

i'll put it in your inbox joe.

Joe

Apr 3 2005, 07:24 PM

CODE

CODE

Daniel8_9_3

Apr 3 2005, 07:44 PM

im not following you here are u saying thats how it should be written out?

Joe

Apr 3 2005, 07:51 PM

Change the small codes I posted and see what that does.

Daniel8_9_3

Apr 3 2005, 07:56 PM

im gonna do a screencapture to so you can look at it.
i changed the iframe to 100% that didnt do anything .

i know theres gonna be people who find my site using microsoft so i need to get it figured out.

Joe

Apr 3 2005, 08:31 PM

Definatly some padding problems. Try adding this to your stylesheet;

CODE

* {
padding: 0px;
margin: 0px;
}

See if that changes it ... don't worry about the rest of your layout for the moment.

Daniel8_9_3

Apr 3 2005, 08:39 PM

im adding it in now.

Daniel8_9_3

Apr 3 2005, 10:39 PM

im gonna have to try again next week i cant take any more frustration for today ive been at this all day and part of last nite.

i need a break from it, i will try to get it worked out next week.

sjthomas

Apr 4 2005, 12:46 AM

Is it possible that its just the way IE delievers iFrames? Have you tried just putting another div in there to see if you still get the same problems?

Oh btw I don't really recommend iFrames on a site. I know many people that still have them blocked after the numerous vulns that were related to them a few years ago. I for one have them blocked in IE (along with a shedload of other thigns).

Daniel8_9_3

Apr 4 2005, 01:09 AM

QUOTE(sjthomas @ Apr 3 2005, 07:46 PM)

the iframe is the least of the problems thats not even much of an issue its my banner and footers and images having extra space to them , the exact same problem you had basically
between every <div> tag im getting extra spacing between tags.

ive tried the following
padding:0px;

spacing:0px;

margin:0px;

margin-bottom:0px;

margin-top:0px;

and i tried line-height which didnt resolve it either.

i attached 2 screenshots on the 1st page of this thread.

i only use the pc on the weekend so im gonna read up on some stuff in the week.
and i wont publish my site until i figure it out.

im getting to the point of getting ready to just tear it down and start over from square 1 at this point, ive basically spent a whole weekend on this, with no solution.

Joe

Apr 4 2005, 10:39 AM

QUOTE(Daniel8_9_3 @ Apr 4 2005, 02:09 AM)

spacing:0px;

Where did that attribute come from

It's your padding issues, thats why there are gaps in IE and not Mozilla, it's because padding works with one browser and margin in the other. (can't remember which way round though).

In my experience of using Iframes Si, both IE and Mozilla render them the same in terms of width, height, padding and margin issues. That wouldn't be the problem in this case

Daniel8_9_3

Apr 8 2005, 09:35 PM

a week later and im still at it.

i dont even know why i care about display in IE at this point.

i started another page to play around with i just stacked 3 <div> tags on top of one another and specified a background color for each just so i could see the seperations between <div> tags.

i specified width and height for each one and added in my embedded stlesheet under body the following padding:0px;

now with this it was seamless until i slapped in my header logo which is the same specified height and width as specified for the <div> tag, once again a gap appears, and im not using borders either so this doesnt make sense at all.

unless the image isnt the same exact size from browser to browser.

Daniel8_9_3

Apr 8 2005, 09:36 PM

QUOTE

Where did that attribute come from

some genius at another webdesign forum.

Daniel8_9_3

Apr 8 2005, 09:40 PM

ive tried padding and margin both at the same time set to 0px and i still have the same exact problem in IE.

obviously its the padding or margin but it doesnt make any sense at all the div is the same size as the image, it has no border i shouldnt have any extra space, the only time i get these little gaps is when i add my images in, the images are the same as the <div> size
i cant understand why the extra space????

Joe

Apr 8 2005, 09:59 PM

Whats the page again?

Daniel8_9_3

Apr 8 2005, 10:19 PM

its all screwed up now lol:) when i get it back to half way normal i'll stick it in your inbox.

edit...

actually i cant justify wasting this much time on it i only have my weekends free to do this stuff and this is going into two weekens now.

im just gonna have to come up with a simpler design i guess.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.