/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Image Sprite causes bug in IE

Copy linkTweet thisAlerts:
Aug 05.2007

Hi doods,

I have a bit of a bug happening. I have website that has a navigation at the top. The navigation it self is built via sprites with CSS. The bug that happens is with IE, when you mouse over any button the layer bellow the navigation drops by about 30 px. Does anybody know how to fix this?

I will really appreciate any input into this.

Thanks in advance!

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriAug 05.2007 — Would need to see the code (complete page) or a link to the page in question - many variables could cause this.
Copy linkTweet thisAlerts:
@bulgarian388authorAug 05.2007 — Wow, I'm sorry, I somehow forgot the most import part the topic, the website.

http://www.biofreshsolutions.com/

I feel pretty dumb right now, lol.
Copy linkTweet thisAlerts:
@CentauriAug 05.2007 — My first suggestion, before I try and set this up locally, is to remove that xml declaration at the start of the page - this will throw IE into quirks mode.

Any particular reason you are identifying the page as xhtml 1.1, when it is being served from the server as text/html ? - personally, I can't see the point of using anything other than html 4.01 doctype.

Another question - why is the whole page a form when there are no form actions? Doesn't seem like a proper use for the form tag to me....
Copy linkTweet thisAlerts:
@bulgarian388authorAug 05.2007 — The XML declaration does not appear in IE, it appears in everything else but IE.

Because I've been writing in XHTML 1.1 for a long time. I know that serving it as text/html as opposed to application/xhtml+xml is wrong, but I don't know how to server it that way and still have it function properly (or at all in IE's case). Suggestions appreciated.

As for the form, it is how Visual Studio creates web forms, and I just picked up on that. I personally like it better that way because I've had problems before when retrieving data from a database in a table wrapped by a form that is inline to the rest of content (like halfway through the page), the form would have huge amounts of padding on the top for absolutely no reason what so ever. As usual it is an IE bug. By having the form tag the first one in the page, I completely avoid the bug. And the other part is, I just copy and paste pages and rename them so the form tag just kinda caries over and I leave it alone. As far as I know, it's not breaking standards, so it works just fine.

Thanks for the reply tho. Now do you have any suggestion on the sprite issue that IE has. I hate IE so much. :mad:
Copy linkTweet thisAlerts:
@CentauriAug 06.2007 — It seems to be due to IE6 not recognising the :after on the navigation ul. Replacing the .navigationLayer ul:after css with an explicit size on the ul seems to fix that [CODE].navigationLayer ul {
height: 38px;
display: block;
}
[/CODE]

The other gaps that appear between the box tops and the body can be fixed by reducing the font size on the top divs [CODE].topTop {
background: url(../images/website/topTop.gif) top center repeat-x;
margin-top: 12px;
[COLOR="Red"]font-size: 1px;[/COLOR]
}
.footerTopTop {
background: url(../images/website/footerTopTop.gif) top center repeat-x;
margin-top: 12px;
[COLOR="Red"]font-size: 1px;[/COLOR]
}
[/CODE]
Copy linkTweet thisAlerts:
@bulgarian388authorAug 06.2007 — Sir, you are a god, thank you very much! ?

I never knew the solution for those gaps was that simple. I've had to write a lot more code in the past to handle those gaps, and the font-size hack just kicks ass.

Thanks again!
×

Success!

Help @bulgarian388 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...