...

View Full Version : Div problem in IE7



AmmO
11-21-2008, 10:25 AM
Im having a problem with a div in ie7 in FF and ie8 its fine but in ie7 its the div is expanding all the way ac cross the screen and the text inside it has increased massivly in size. heres the relevent code/CSS. any suggestions people



<div class="style1" style="background: #33CCCC; width 960px; height: 79px; text-align: center; vertical-align: middle; color: #FFFFFF;">
<h1>Sales Franchise Demo System</h1>
</div>




body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
color: #000;
padding: 0;
border: 0;
margin: 0;
display:inline-block;
float:left;
}
.style1 {
border: 1px solid #33CCCC;
margin-left: 183px;
}

abduraooft
11-21-2008, 10:43 AM
The issue is not clear from the above posted code. Can we have a link?

PS: Validate your code and fix all errors in your markup, if any.




body{
....
display:inline-block;
float:left;
}

Applying those CSS properties directly to the body element id not a good practice, I believe.

AmmO
11-21-2008, 10:49 AM
no major problems in validation

the link thing bit more tricky

let me try and explain the problem more clearly.

I have a page at the top left corner is a image contained within a div. Then next to that is another div with some text. In FF and IE8 they look fine they line up with the footer and the text is the same size. I have made it so that it stops 2/33 of the way accross my screen since it is a 22'' widescreen running at full res and not everybody else has the same.

Whats happening in IE7 is the div is expaning all the way accross the screen even though i have already set its width and the text has increased. Ive been hacking about with the code all morning to no avail.

I just need to know how i can get the div to keep to the size specified in IE7 ive tried the usual hacks and nothins worked.

AmmO
11-21-2008, 10:56 AM
ok ill change that see if it helps

AmmO
11-21-2008, 10:59 AM
That just made it worse i moved it into its style element and it went crazy in FF and IE8 but looked exactly the same in IE7

abduraooft
11-21-2008, 11:15 AM
What's your purpose of changing the display property of body? Have you considered the compatibility of inline-block property (http://www.quirksmode.org/css/display.html#t03)?

AmmO
11-21-2008, 11:16 AM
Cracked it

width 960px; not width:960px;

jhaycutexp
11-21-2008, 11:38 AM
Cracked it

width 960px; not width:960px;

yeah you sure about that?... i guess you need more reading to do.. thats just my opinion..

AmmO
11-21-2008, 12:11 PM
sorry other way around works fine now

AmmO
11-21-2008, 12:12 PM
always the simple things that take ages to solve

abduraooft
11-21-2008, 12:24 PM
always the simple things that take ages to solve CSS validator (http://jigsaw.w3.org/css-validator/#validate_by_input) can easily track such errors!

AmmO
11-21-2008, 04:52 PM
CSS validator validate my CSS 100%

abduraooft
11-22-2008, 05:02 AM
CSS validator validate my CSS 100%I'm talking about your original code, which has an errors in the style attribute value


<div class="style1" style="background: #33CCCC;
width 960px; height: 79px; text-align: center; vertical-align: middle; color: #FFFFFF;">
<h1>Sales Franchise Demo System</h1>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum