Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Div problem in IE7

    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

    Code:
    	    <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>
    Code:
    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;
    	}

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    Edit:
    Code:
    body{
    .... 
    display:inline-block;
    	float:left;
    }
    Applying those CSS properties directly to the body element id not a good practice, I believe.
    Last edited by abduraooft; 11-21-2008 at 10:52 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ok ill change that see if it helps

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    What's your purpose of changing the display property of body? Have you considered the compatibility of inline-block property?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Cracked it

    width 960px; not width:960px;

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by AmmO View Post
    Cracked it

    width 960px; not width:960px;
    yeah you sure about that?... i guess you need more reading to do.. thats just my opinion..

  • #9
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    sorry other way around works fine now

  • #10
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    always the simple things that take ages to solve

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by AmmO View Post
    always the simple things that take ages to solve
    CSS validator can easily track such errors!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    CSS validator validate my CSS 100%

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by AmmO View Post
    CSS validator validate my CSS 100%
    I'm talking about your original code, which has an errors in the style attribute value
    Code:
    <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>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •