Announcement

Collapse
No announcement yet.

CSS IE v FF

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    CSS IE v FF

    Hi,

    I am having trouble with my CSS. I think it is something to do with the nested divs/clears but nothing I have tried seems to work... so if anyone can point me in the right direction...

    I have attached images for IE7 and FF and the css is at www.madmash.com/acatalog/mm-css.css. The webpage is www.madmash.com and each product page also has a couple of examples of the prob.

    anyone have any ideas? IE7, FF, OP, SA all aok, just IE 6 not working.

    Thanks,
    Paul.
    Attached Files
    Tags: None
    #2
    you have code like this:

    HTML Code:
    <div>
 <div></div>
 <div></div>
 <div></div>

</div>
    do this:

    HTML Code:
    <div>
 <div></div>
 <div></div>
 <div></div>
<div style="clear:both;"></div>
</div>
    i ahve not cheched your html, its just a guess.

    Comment

      #3
      I think this is a bug in IE, but not sure. If I set a float or width in the box that isnt expanding it works, but then it messes with my design...

      any ideas?

      I have created a test html which shows what is happening if anyone has suggestions (saved as txt).

      Paul.
      Attached Files

      Comment

        #4
        i actually gave you the solution feller, please read.

        HTML Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
  <head>
	<style type="text/css">
	<!--
	div{overflow:hidden;}
	.g_ts{background:#FFF;color:#D49;font-size:14pt;margin-bottom:10px;padding-left:10px;border:1px solid #FFF;border:1px solid #DDD;position:relative;}
	.g_cl{clear:both;}
	.g_bx{background:#EEE;border:1px solid #DDD;margin-bottom:10px;padding:10px;}
	.g_fl{float:left;}
	.img_wrap{background:#FFF;padding:6px;border:1px solid #DDD;}
	-->
	</style>
  </head>
  <body>

<div class="g_fl" style="width:370px;">
<div class="g_bx">
	<div class="g_ts">blah blah...</div>
	<div class="g_cl" style="margin-bottom: 10px;">
		<div class="g_fl" style="margin-right: 10px;">
			<div class="img_wrap">
			1
			</div>
		</div>
		<div class="g_fl" style="margin-right: 10px;">
			<div class="img_wrap">
			2
			</div>
		</div>
		<div class="g_fl">
			<div class="img_wrap">
			3
			</div>
		</div>
	</div>
	<div class="g_cl">
		<div class="g_fl" style="margin-right: 10px;">
			<div class="img_wrap">
			4
			</div>
		</div>
		<div class="g_fl" style="margin-right: 10px;">
			<div class="img_wrap">
			5
			</div>
		</div>
		<div class="g_fl">
			<div class="img_wrap">
			6
			</div>
		</div>
	</div>
	<div style="clear:both;"></div>
</div>
</div>
  </body>
</html>

        Comment

          #5
          doh! I swear I did that and nothing happened...

          thanks very much, I was somewhat concerned I might need to recode quite a lot phew.

          p.

          Comment

          Previous template Next
          Working...
          X