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 5 of 5

Thread: div alignment

  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    24
    Thanks
    8
    Thanked 0 Times in 0 Posts

    div alignment

    I'm trying to make this page work in firefox and ie. It works fine in ff, but doesn't align properly in ie. The header div needs to be static and positioned above the divs below it. The menu div also needs to align statically next to the specs div. Attached a pic showing how it should look.

    Code:
    body {background-color: #666666;}
    #header {z-index:9000; position:fixed; height:25px; margin-top:0; width:100%; background-color: #666666;}
    #form {width:400; margin-left:auto; margin-right:auto;}
    #info {text-align:center; width:800px; margin-left:auto; margin-right:auto;}
    #specs {text-align:center; width:800px; height:1041px; background: url('spec-bg.png') no-repeat; margin-left:auto; margin-right:auto;}
    #model {text-align:right; padding:40 25 0 0; }
    .model {font-weight:bold; font-style:italic; font-size:32px;}
    .description {font-weight:normal; padding-top:10px;}
    #menu {color:#ffffff; float:left;}
    #prod-img {position:relative; float:right; width:200px;margin:15 30 15 15; padding: 5 30 5 5;}
    #spectable {position:relative; float:left; width:450; margin:25 10 15 35; padding:5 5 5 5;}
    .table th {font-weight:bold; font-size:12px;}
    Code:
    <div id="header">
    	<div id="form">
    		<form>
    			<input onkeyup="getSpecs(this.value)" />
    		</form>
    	</div>
    </div>
    <div id="getspecs">
    	<div id="info">
    		<div id="menu">
    			<script type="text/javascript" src="sticky.js" />
    		</div>
    		<div id="specs">
    			<div id="model">
    				<span class="model"><?php echo $model; ?></span><br />
    				<span class="description"><?php echo $desc; ?></span><br />
    			</div>
    			<div id="prod-img">
    				<img src="<?php echo $imgpath; ?>" height=200 />'; 
    			</div>
    			<div id="spectable">
    				<table><th colspan="2" align="left">Table 1</th>';
    					<tr><td>text</td><td>text</td></tr>
    					<tr><td>text</td><td>text</td></tr>
    					<tr><td>text</td><td>text</td></tr>
    				</table><br /><br />
    				<table><th colspan="2" align="left">Table 2</th>';
    					<tr><td>text</td><td>text</td></tr>
    					<tr><td>text</td><td>text</td></tr>
    					<tr><td>text</td><td>text</td></tr>
    				</table><br />
    			</div>												
    		</div>
    	</div>
    </div>
    Attached Thumbnails Attached Thumbnails div alignment-spec.png  
    Last edited by goltoof; 07-05-2011 at 07:50 PM.

  • #2
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    It's hard to see the problem without seeing the actual webpage. But try adding: display: inline; to the css for the menu. I've been told there is a bug in old IE versions that need that to display divs side by side.

    Also, why are you using tables inside you're divs?

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    I tried validating your code at validator.w3.org, and got:

    Line 8, Column 19: document type does not allow element "DIV" here
    <div id="getspecs">

    The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

    One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
    Try correcting that and see if it works. I'm guessing you have improperly nested divs, which IE is very picky about, though I didn't read through your entire markup.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Ensure you have define DOCTYPE in your each page, b'coz many of CSS properties won't work in IE without defining DOCTYPE.

    I prefer to use floats instead of position or z-index.

    The layout you shared is possible without positioning or z-index...


    Cheers

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hello,

    please make w3c validation for your code ,because checking for w3c validation would be remove browser compatibility errors.or please do provide ur website url to check


  •  

    Posting Permissions

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