I have trouble getting this box to work properly. Now it looks good in IE 6-8, but not in Firefox =/

I'm not sure what i'm doing wrong, maybe someone can help? look at:

http://www.klubbrockit.se/tk/TK_puff.html

3 answers

2
points
This was chosen as the best answer

Your rounded corner is dissappearing because of the "display: inline" and the fact that the div is effectively empty (so it just doesn't show up). If you add a character to the div, it ends up showing up below and to the right of the title. If you remove the "display:inline" it puts the rounded corner there, but then the top right rounded corner dissapears because the div overtop of it is covering it up.

I was playing around with it a little and I got rid of the lt2 div and added the class to the puffrubr div and was able to fix the rounded corner overlaying with some manipulations of the css. Firebug can be really handy for this sort of thing. I'm not sure how this will look in IE though, but this fixes it for FF.

<div class="rt2">
<div class="puffrubr lt2">Title goes here</div>
<img width="28" height="21" border="0" alt="" src="images/rubRedSnedstreck.gif"/>
</div>

If you want to keep the lt2 div separate, then you will have to get rid of the display inline and add an explicit width to it:

.lt2{
width: 126px;
/*display: inline*/
}

But that will screw up any dynamic stretchiness you were probably hoping for.

Also, you might try adjusting your padding on puffrubr to be something like:

padding: 3px 0 0 5px;

That looks good in FF, but I haven't checked any other browsers (you're sure to have to make adjustments. See Paul Irish's CSS hacks...)

Answered almost 7 years ago by Christopher McCulloh
  • Thanks! that helped alot! i adjusted your code a bit, so the backslash-image will adjust after the length of the title: <div class="rt2"> <div class="puffrubr lt2"> The very long Title goes here<img width="28" height="21" border="0" alt=""src="images/rubRedSnedstreck.gif"/> </div> </div> You saved me a lot of troubleshooting, thanks again! and yes, i was going to fix the margins later =) Tony R almost 7 years ago
  • Nice answer, Christopher. +1 Abinadi Ayerdis almost 7 years ago
0
points

in your css:

.puffrubr {
  background-color: #B51A18;
  height:21px;
}
Answered almost 7 years ago by Eli Penner
  • This doesn't fix the problem. There is still a dark red square below the title, and no rounded corner on the top left after doing this... Christopher McCulloh almost 7 years ago
Rob 230
0
points

Your biggest problem right now is your doctype is wrong and you are in quirks mode. Case matters DOCTYPE must be capitalized.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Specifically, IE will pretend like it's 1998 all over again. You should never use IE as a reference for how things should work. Always, always use any other far more modern browser to initially check your markup. Then hack for all of IEs many quirks and bugs.

Answered almost 7 years ago by Rob
  • I had it working in Firefox from the start, but then IE looked like crap. When i got it to work in IE, Firefox looked weird. so.... I usually use FF as reference point, but this time i screwed up. Tony R almost 7 years ago
  • Does not answer the question at all. If you aren't going to answer, you might as well just leave a comment. Also, the doctype was not the biggest problem. Abinadi Ayerdis almost 7 years ago
  • This is true. Your browsing being in quirks mode can just ruin your entire layout, and your day... Christopher McCulloh almost 7 years ago
  • @Abinadi, you cannot create a modern web page while in quirks mode and he is in quirks mode. The box model is all wrong and IE particularly will continue to give him problems. His problems will not go away and nothing can help him till he fixed the doctype. You should Google for 'quirks mode' and the box model to learn what we're talking about. Rob almost 7 years ago