/    Sign up×
Community /Pin to ProfileBookmark

layout breaks on Win IE6

Copy linkTweet thisAlerts:
May 18.2005

[*As of 2PM I have updated the css file using the suggestion from Fang so this problem no longer shows up.*]

I’ve designed a website but the graphical layout in the navigation is breaking apart in IE6 on the PC (and I believe older versions of IE on PC so this is a huge part of our audience!)- [url]http://www.awakenthemagic.com/index.htm[/url] . Specifically, there are black spaces appearing underneath the Facilitation, Wellness, and Tech-Wizardry links. The problem gets worse when text size is increased on the page. The gap under Facilitation does close up when the text size is decreased to smallest but the others remain.

The graphical slices were made in ImageReady and spit out as absolute divs. I then created the rest in Dreamweaver. The whole page currently has absolute divs because I haven’t figured out box models yet (but I will :-). I do not get this breaking problem on the Mac at any text size (and Firefox on PC didn’t have it either last time I looked). Any help in troubleshooting would be greatly appreciated! I have looked at the positioning of the divs above and below the areas in question and they look fine.

Thanks!
Mike

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@kahnciousauthorMay 18.2005 — If it helps you for viewing the page source the areas with the visual problems are occuring in the following sections:

<div class="header-nav-facil-2_">

<div class="header-nav-well-2_">

<div class="header-nav-well-3_">

<div class="header-nav-tech-1080_">

All the problems are occuring in areas that have thin horizontal slices. I had to make them to account for the complexity of the rollover image states.

-m
Copy linkTweet thisAlerts:
@FangMay 18.2005 — img {vertical-align:top;}
Copy linkTweet thisAlerts:
@kahnciousauthorMay 18.2005 — Thanks, Fang! That worked. I added img {vertical-align:top;} to the css file on a test css file and created a page- http://www.awakenthemagic.com/atm_redo/

Is it bad to add this img tag to the whole css? Different image alignment tags added to specific divs/classes would override it, right?

Thanks,

Mike
Copy linkTweet thisAlerts:
@FangMay 18.2005 — Just add it where needed.
Copy linkTweet thisAlerts:
@kahnciousauthorMay 18.2005 — So, you wouldn't add is "wholistically" to the css?

Is it a bug that IE requires this?
Copy linkTweet thisAlerts:
@FangMay 19.2005 — Usually [I]img {vertical-align:bottom;}[/I] fixes the problem, but in your case [I]top[/I] works. It's not a bug and ALL browsers have the [URL=http://web.archive.org/web/20040202073255/http://devedge.netscape.com/viewsource/2002/img-table/]problem[/URL]
×

Success!

Help @kahncious spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...