PDA

View Full Version : A few small IE 7- CSS issues. PNG Transparency and Margins/Paddings.



najkiie
Jan 24th, 2009, 12:16 PM
Hey there, i started working on a new webpage yesterday. It looks great in IE 8 and FF. But in Ie 7 and lower, it looks like ****.

The site is at www.trikehost.co.uk

If you view the site in IE 7- you will see that it doesnt display it right. I used margin and sometimes padding to align the div elements so it would look good.

And if anybody know an easy way to fix the IE Transparency bug, please tell me.


Any ideas whats going on?

abduraooft
Jan 24th, 2009, 12:29 PM
Is that url correct? (FF says "Server not found" )

najkiie
Jan 24th, 2009, 12:40 PM
Oh, sorry i forgot the 's'.

here's the link:
http://strikehost.co.uk/

abduraooft
Jan 24th, 2009, 12:56 PM
OK, you have some kinda divitis (http://csscreator.com/?q=divitis), so adjust your markup and make it semantic (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html). Say, your top navigation should is to be switched to a ul-li (http://htmldog.com/reference/htmltags/ul/) tag set. Then apply a float:left; to the list items to align them horizontal.

Now, to achieve png-transparency, you need to use some png-fixes (http://www.google.com/search?q=pngfix)

najkiie
Jan 24th, 2009, 01:45 PM
abduraooft, Thanks. I'll work on it and comment back later on if i need any more help.

:)

najkiie
Jan 24th, 2009, 01:54 PM
And i'm alredy back.

For some reason IE (IE 7 and below) just refuses to apply the margin. I also tried using padding. I'm working on the menubar now, the li tags are working good but i need to margin it about 15px from the top and i also need to margin the first <li> item about 20px from left. I tried using the line-height, but that didn't apply either. Is there a fix for this?

najkiie
Jan 24th, 2009, 03:25 PM
I would like to thank you soo much for providing me with those links.

I found out why it didn't apply the margins/padding's.

http://www.maratz.com/blog/archives/2006/11/11/ie-7-quirks-floats-and-margins/

Its working fine now. I uploaded an example at www.strikehost.co.uk/test If its not there, then you can view it on the main page www.strikehost.co.uk

However there is one little thing still annoying the hell out of me, neither IE 5.5, 6 or 7 applies the link CSS. Check it out: www.strikehost.co.uk/test

Any ideas about that? That's probably, most likely the last thing I'm asking about :)

abduraooft
Jan 24th, 2009, 03:37 PM
You need to fix all the errors in your markup and CSS, check http://validator.w3.org/check?uri=http%3A%2F%2Fwww.strikehost.co.uk%2Ftest&charset=%28detect+automatically%29&doctype=Inline&group=0
and http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.strikehost.co.uk%2Ftest%2F&profile=css21&usermedium=all&warning=1&lang=en

najkiie
Jan 24th, 2009, 04:11 PM
Thanks. When i try to fix some of the "errors" it messes up the whole content.

Like for instance, this one.

background-repeat: repeat-y;"

if i remove the " " " from the end, the content toally messes up. And the same thing happens if i remove the whole line? :S

And none of those errors has to do with the link (<a>) part.

Excavator
Jan 24th, 2009, 06:27 PM
Hello najkiie,

.main_content .content-box {
background-repeat: repeat-y;
background-color: transparent;
display: block;
float: left;
width: 610px;
margin-top: 8px;
margin: 0px;
padding: 0px;
padding-left: 15px;
padding-right: 15px;
}
.main_content #content-box {
background-image: url(images/content-bg.png);
background-repeat: repeat-y;"
margin: 8px;
}
can all be shortened down to this

.main_content .content-box {
background: url(images/content-bg.png) repeat-y;
display: block;
float: left;
width: 610px;
padding: 0 15px;
}
.main_content #content-box {
}



================
That bit in red below, looks like you didn't really know what to call it. Do you really need both?
<div class="content-box" style="background-image: url(images/content-top.png); height: 8px;"></div>
<div class="content-box" id="content-box">

<p class="content-box-title">About StrikeHost</p>
<p class="content-box-text">StrikeHost! A more efficany way of web hosting.
At StrikeHost we provide a fast and reliable hosting programme.
We aim to get our clients the most



Thanks. When i try to fix some of the "errors" it messes up the whole content.
When your using the validator to fix errors it really helps to start at the top. The cascading affect of one error at the beginning of the code can really surprise you.

najkiie
Jan 24th, 2009, 08:39 PM
Excavator, Thank you so much :D

And no i didn't need both #content-box and .content-box :)

The site looks almost identical in IE 6 as in FF or IE 8 now. Great job guys, thanks :D

Excavator
Jan 24th, 2009, 09:15 PM
Right on.
Looks good in FF3 and IE8 here - and you've been working on the errors as well. Good work!

najkiie
Jan 24th, 2009, 10:03 PM
Thanks again Excavator, but you and abduraooft are the one's that really deserves a "Thank You!". So i thanked your posts, and added a point to your to your reputations... :D

Have a nice day both of you :P