PDA

View Full Version : IE hacks for CSS


liquidmonkey
04-22-2008, 10:38 AM
why can't the worlds most used browser be more standards compliant??? very frustrating! :confused:

my site works and looks as it should in firefox and even safari (which is a surprise to me) but there are some small errors in IE7 and most likely more errors in older versions. and i thought i was ready to launch my new site design :(

check it out here...http://www.livelifexplore.com/index2.html

the mainNav bar highlighting does not fill the entire bar as it should when compared to firefox AND the final BLOG tab is made into the 2 rows. I have NO IDEA how either of these is happening but have heard of IE hacks for CSS.

how do i know which hacks to put in my CSS and where to put it?
any help here would be appreciated!

domedia
04-22-2008, 01:54 PM
I never used the technique you're using .
What I do is setting a width on each LI, and then set the links inside them as block elements.

liquidmonkey
04-23-2008, 06:52 PM
and which technique am i using? you've totally lost me. and does your method work with IE versions?

domedia
04-23-2008, 08:10 PM
Your technique = the way you coded your page :)

What I usually do is setting a width on each LI and then set display: block on the A tag through css, display: block;

Cannot access your page right now but look here for some sample codes as well:
http://css.maxdesign.com.au/listamatic/

liquidmonkey
04-25-2008, 07:35 PM
try checking my site again, it will work now.
i've gone and changed any 'em' settings to 'pixels' but that did not help either.
tried to set the display to a block but again, no change, well,it only made things worse to be honest.
here is the CSS...

#header {
position: relative;
height: 180px;
width: 900px;
background: url(../assets/dock-jumping-banner.jpg) no-repeat top left;
}

#header ul {
position: absolute;
left: 0px;
bottom: 0;
list-style: none;
/* --- the following three lines are used to achieve opacity or transparency in the main nav bar --- */
filter: alpha(opacity=85);
-moz-opacity: .85;
opacity: .85;
/* -------------------------- */
background-color: #999999;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}

#navigation {
float: left;
margin: 0px;
padding: 0px;
}

#mainnav li {
display:block;
padding:0;
margin:0;
float: left;
}

#mainnav a:link,
#mainnav a:visited {
color:#FFFFFF;
text-decoration: none;
padding-top: 5px;
padding-right: 7px;
padding-bottom: 5px;
padding-left: 7px;
}

#mainnav a:hover {
color: #000000;
background-color: #CCCCCC;
}

#home #navhome a,
#adv #navadv a,
#pano #navpano a {
color:#000000;
background-color: #666666;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-top-width: 1px;
border-bottom-width: 1px;
padding-top: 5px;
padding-right: 7px;
padding-bottom: 5px;
padding-left: 7px;
}

#home #navhome a:hover,
#adv #navadv a:hover,
#pano #navpano a:hover {
background-color: #666666;
text-decoration: none;
padding-top: 5px;
padding-right: 7px;
padding-bottom: 5px;
padding-left: 7px;
}

#home #navhome a:hover,
#pano #navpano a:hover {
cursor:default;
}

domedia
04-25-2008, 08:02 PM
I said to set the links to block elements, in both posts.

#mainnav a {display: block;}

Crazy videos btw, you guys have too much fun :-D

liquidmonkey
04-27-2008, 03:56 PM
ok, your advice worked, i just didn't apply it in the right way before is all :)
have one final problem but will post that in the spry forum now.

thanks for all your help domedia!!!!

ps, glad u like the vids!!

paispais
04-29-2008, 05:06 PM
how do i know which hacks to put in my CSS and where to put it?
any help here would be appreciated!

Instead of using css hacks try using conditional comments to select certain stylesheets for different browsers. They make things less confusing.

http://minimaldesign.net/blog/css/on-conditional-comments

chriskq
04-30-2008, 08:38 AM
sorry to throw another spanner in the works

but wen i code, i code to w3c web standards, FireFox adheres to these standards so i primarily use FF to test html/css structures.

i reguraly check IE6 (standalone version) and IE7 for style differences

if there are, i then target the appropriate classor ID and hack for IE6 and IE7 by using the below

IE7
*+html .classname {
height: 21px;
}

IE6
*html .classname {
height: 15px;
}

hope this helps.... dont code to IE as they do not adhere to web standards... you will learn to put up with it thou :p