PDA

View Full Version : IE h3 link display issue



dantheman50_98
05-15-2008, 04:51 PM
Hello everyone,
I have been building this site (some of you may have seen my posts in other forums) and I have stumbled across a problem.

The site in question is http://www.celebsusa.com

In Firefox, the links are displayed with a pink background that extends to the width of the title, whereas in IE7 the color extends to the full width of the containing div(though at the mo it is at 50% width, which I set.

I understand that this is probably related to the display:inline/block properties, so I have tried using display:inline and that didn't work, so I also added whitespace:nowrap and that worked, but then the content which should have been beneath the titles somehow moved up and it all became a complete mess.

Anyhow, here is the css:

h3 {
font-size: 16px;
font-weight: bold;
padding:3px;
background:url(images/bgtext.jpg) top left;
width:50%; }

h3 a {
color:#ffffff;
text-decoration:none; }


Any ideas as to what the devil is going on here? I know ie is a pain in the ass but this is one of those niggling issues which continues to frustrate me to the point of near hair loss.

Any help most appreciated.

Cheers,
Dan

wildjokerdesign
05-16-2008, 07:08 AM
What is it you want to see? You never really said. Something I normally do right off the top is "zero" everything out so to speak.

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, pre,code,form,fieldset,legend,input,textarea,p,blo ckquote,th,td{margin:0;
padding:0;
}
table{border-collapse:collapse;
border-spacing:0;
}
fieldset,img{border:0;
}
This gives you a blank slate of sorts to start with. You might want to give that a try.

You might want to have a look also at http://developer.yahoo.com/yui/reset/ This is Yahoo's version of "zeroing" things out. It uses the above and also neutralizes some other elements. Along with that the also have a YUI Base CSS that you may want to have a look at.

dantheman50_98
06-06-2008, 04:55 AM
Thanks for the reply - I forgot I posted here actually so sorry about that.
I sorted it out by using whitespace:nowrap and then adding a top and bottom white border to separate the title text from the description text, then I removed whitespace:nowrap for some reason and it still works fine.
I know the border is a cheat but it works.
Thanks anyway and what you said about "zeroing" everything is something I have taken on board and will implement in future projects.

Cheers,
Dan