SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: css browsers show different...
-
Jul 11, 2008, 18:37 #1
- Join Date
- Aug 2001
- Location
- Amsterdam
- Posts
- 788
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
css browsers show different...
Hi this is probably something that is mentioned a lot .. but even with reading some of the tutorials I'm stuck ..
I have some HTML and css below..
The problem is that it works in IE but in Firefox it only works in the first box but after that the word "details" gets lower and lower and shifts out of the box..
I should know better but I'm stuck and can't find it anymore....
thanks
peanuts
HTML Code:<div class="box" > <div class="legend">title1</div> <div class="boxcontent"> <div class="floatright"> <a href="somewhere"> <img src="someimg" border=0 class="product_img" /> <br /> Details</a></div> <p class="product_description">description</p> </div></div> <div class="box" > <div class="legend">title2</div> <div class="boxcontent"> <div class="floatright"> <a href="somewhere"> <img src="someimg" border=0 class="product_img" /> <br /> Details</a></div> <p class="product_description">description</p> </div></div>
Code:.box { font-family:verdana,sans-serif; border-width:1px; border-style:solid; border-color:white; padding: 0px 10px 10px 10px; margin-top:15px; margin-right:10px; font-size: 14px; } .box h1{ margin-top:25px; margin-bottom:15px; font-size: 12px; font-family:verdana,sans-serif; font-weight:bold; } .product_detail { font-family:verdana,sans-serif; font-size:10px; padding:0px; margin-top: 1px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } .product_description { font-family:verdana,sans-serif; font-size:10px; padding:10px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; } .product_img { float: right; font-family:verdana,sans-serif; font-size:60%; width: 90px; margin: 0 0 10px 10px; background-color: transparent; padding: 10px; } .floatright { float: right; width:20%; background-color: transparent; display:block; font-size:60%; color:inherit; font-family:verdana,sans-serif; text-align:center; } .legend { font-family:verdana,sans-serif; display:inline; padding:5px; font-weight:normal; font-size:13px; height:20px; position:relative; z-index:101;top:-12px; background-color:#fff; color:inherit; } .boxcontent { font-family:verdana,sans-serif; min-height:100px; height:auto !important; height:0px; }
the neigbours (free) WIFI makes it just a little more fun
-
Jul 11, 2008, 21:44 #2
- Join Date
- Jul 2008
- Location
- Norway
- Posts
- 121
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Do you have a link we could check out?
-
Jul 11, 2008, 22:44 #3
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You aren't clearing your floats :
Code:.boxcontent { font-family:verdana,sans-serif; min-height:100px; overflow: hidden; } * html .boxcontent { height: 100px; overflow: visible; }
-
Jul 12, 2008, 06:07 #4
- Join Date
- Aug 2001
- Location
- Amsterdam
- Posts
- 788
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi .. sorry no link .. it's on my test environment
I knew I was forgetting something.. THanks Centauri...the neigbours (free) WIFI makes it just a little more fun
Bookmarks