21 replies [Last post]
bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

Hi CSS Friends
I have an annoying gap below the top image in the right hand features column that only occurs in IE. Firefox, Safari, Seamonkey, Opera are fine.

page is http://www.lamanga4u.com/index-new.html
CSS is http://www.lamanga4u.com/lamanga4u.css

Also annoying but not critical, is the height of the navbar (top menu) background. It formats just how I want in all other browsers that I have, but to get it looking halfway decent in IE, I have to accept the less than perfect look in the other browsers. I usually get over this by using images with absolute positions, but it would be great if there were an easier solution.

I have validated both the HTML and the CSS

Any help appreciated.
Bingo

edgewalker
Offline
newbie
Last seen: 13 years 51 weeks ago
Joined: 2008-01-30
Posts: 2
Points: 0

I tried to look at this, but

I tried to look at this, but the first link is broken.

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

URL Correction

Sorry the page url is http://www.lamanga4u.com/index-new.html
:bigoops:

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 44 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Have a look at my post on

Have a look at my post on conditional styles here: http://csscreator.com/node/28011.

IE vs. Firefox/Safari/etc. will always bring some minor differences. Instead of trying to find the perfect CSS to make those differences go away, I correct it specifically for each browser with these conditional styles.

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

Conditional Styles

Thanks Aequitas.
Thats an approach I find interesting. I will pop off and learn how to write conditional statements in HTML (didn't know you could). Do you have a code snippet to give me a running start?

However, in this case I can't get rid of the gap in IE even when formatting solely for IE without consideration of other browsers.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 44 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Well, I use that technique

Well, I use that technique at my clan's site http://www.damnneardoomed.com as well as http://www.teamserenity.com/IYTYGIB%20Final/ - visit either of these pages to see a working model of the conditional statements.

As far as your second statement, I'm not sure I understand, please clarify. A conditional style will apply only to the browser you specify. Since IE is the only browser that needs "special" consideration, you need not worry about any "other browsers' considerations." But, maybe I'm just misinterpreting what you're saying.

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

Aequitas, Thanks for the

Aequitas, Thanks for the examples! Thats much simpler than I dared hope and I will certainly take this approach in future.

I understand your point of only needing to give IE special consideration - BUT - I still don't know how to get rid of the gap below the top image in the right-hand column when styling for IE.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 44 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I don't recall the specific

I don't recall the specific example, but either
a) reduce the amount of padding and/or margin/padding-bottom on the element / the margin/padding-top of the following element
b) use negative values for margin/padding-top/bottom

Edit: In your case you could assign an ID to the top part of the right column's img tag. Then, style the ID appropriately with a negative margin-bottom in the IE-specific stylesheet. This would, with tweaking, remove the space below it.

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

Problem Solved - No White Space allowed after image in IE

Thanks to Aequitas for his/her advice! In this case I could not assign an id directly because the right column contained 2 images. So I enclosed the top one in its own div to achieve the same.

STILL COULD NOT MOVE IT.

A friend just came by and told me about an explorer bug. You cannot have any white space in your code between the img tag and the enclosing tag.

As soon as you put just one space after the end of the image tag, the annoying gap reappeared.

Curses Microsoft!

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 44 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Hmm, interesting. Was it a

Hmm, interesting. Was it a true space? Or whitespace? It shouldn't matter if you had a carriage return or tab.

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

I tried inserting a space(s)

I tried inserting a space(Drunk in the code with the Space Bar and with a carriage return. All had the same effect. Did not try the tab.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 44 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

What editor are you using? I

What editor are you using? I always tab and carriage return such as below:

whatever

Some text here

Without problem...

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

I mostly use Dreamweaver 8.

I mostly use Dreamweaver 8. I also use tabs and carriage returns to try and keep the code neat.
However, the problem only occurs (or is only obvious/visible) in certain situations.

For example, the bottom image in that column was no problem (or did not show) maybe because there was nothing immediately below it.

Maybe it has something to do with nesting???

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 44 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Not really sure. I looked at

Not really sure. I looked at your code a little bit. I have a couple questions for you.
1) Why define text that is a paragraph in a div tag? The p tag is semantically correct for the two paragraphs in the right column.
2) Why put an image in a plain old div? You can define all that you need to for the image by styling the image with an ID.

Edit: Whoops, I didn't notice you had an align="center" on this tag. You should give it an ID ( or class, if that suits ) and define margin: 0 auto 10px auto; in your CSS for it. This will center the images, and you can get rid of your line breaks ( see # 3)

3) Why put two line breaks in and not use one margin-bottom?

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

Still learning

The answer to most of your points below is that I am still learning
Not really sure. I looked at your code a little bit. I have a couple questions for you.
1) Why define text that is a paragraph in a div tag? The p tag is semantically correct for the two paragraphs in the right column. Never really twigged the difference - I know I should, but often these get by me in the rush to complete a project
2) Why put an image in a plain old div? You can define all that you need to for the image by styling the image with an ID. I did not know you could do this until this pm. I just did this with a new image I added today.

Edit: Whoops, I didn't notice you had an align="center" on this tag. You should give it an ID ( or class, if that suits ) and define margin: 0 auto 10px auto; in your CSS for it. This will center the images, and you can get rid of your line breaks ( see # 3) Thanks for this Smile . Its only since reading this forum that I realised you could centre stuff this way. I alway struggled to find a neat way to centre a web page not using the html tag.

3) Why put two line breaks in and not use one margin-bottom? Will do. The line breaks were just an expedient while sorted the problem bits out.

Thanks for your help, always very much appreciated.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 44 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Ah, understandable. I was

Ah, understandable. I was frustrated when I found out about semantic markup because I was taught HTML by someone who didn't know what semantic markup was, nor did they give a *beep* once I told them. Just thought you might be unaware, as I once was, and thought you could use the heads up.

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

can you re-post the thread

can you re-post the thread please? I think you accidentally posted to this one.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 44 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Can I repost what thread?

Can I repost what thread?

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

Sorry I misread the email. I

Sorry I misread the email. I thought you had posted a link to a thread concerning correct syntax.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

That Mysterious Gap under

That Mysterious Gap under Images

See if that doesn't explain what's going on.

It is a not-good idea to jigger the html formatting to rid yourself of the white space.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

bingobrewster
Offline
Regular
Spain
Last seen: 13 years 47 weeks ago
Spain
Timezone: GMT+1
Joined: 2008-01-30
Posts: 12
Points: 0

Well Illustrated Examples

Thanks Gary that worked nicely. Have been able to unjigger my html

"The bottom of the object lines up with the baseline of the parent element (implicit) text"

I assume the above is generally true and not just for IE, so why does the mysterious gap only show in IE?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I have forgot most of what I

I have forgot most of what I knew about just when an inline box is created. Most browsers don't create one unless there's an explicit bit of text, even if only a white space. IE, though, always creates the anonymous inline box. I may have a detail or three wrong—my memory being bad—but it's a working hypothesis.

Allowing for the image's vertical alignment is now just automagical.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.