IE CSS sizing issues

Discussion in 'Web Programming' started by Swan, Apr 19, 2008.

Sign in to Post
Thread Tools

Thread Tools

  • Thread ID:
IE CSS sizing issues
  1. Unread #1 - Apr 19, 2008 at 1:14 AM
  2. Swan
    Joined:
    Jan 23, 2007
    Posts:
    4,957
    Referrals:
    0
    Sythe Gold:
    0
    Sythe's 10th Anniversary Member of the Month Winner

    Swan When They Cry...
    Retired Global Moderator

    IE CSS sizing issues
    Well, I'm creating a basic layout for a website, and due to the majority of people around the globe using IE, naturally I need it to be IE friendly.

    Here is what it looks like in FireFox:
    [​IMG]

    And in IE:
    [​IMG]

    I'm guessing it's something to do with my use of the DIV tag, which I prefer over table, but I really don't know.

    I have come to the conclusion that IE sucks major bawls, or its CSS parsing is Microsoft standard (and anyone with a brain knows that MS standard isn't good for shit).

    Here's the code:
    home.html:
    Code:
    <html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>Home</title>
	</head>

	<body>
		<center>
		<div class="main">

		<div style="background-image:url('images/logo-bg.png');height:25%;left:5px;right:5px;top:5px;border-bottom:thin solid black">

		<div style="border:thin solid black;
			position:relative;
			background-color:rgb(250,250,250);
			top:10%;
			height:70%;
			text-align:middle;
			width:95%">
			
			<h1>logo</h1>

		</div>

		<div style="border:thin solid black;
			background-color:rgb(250,250,250);
			position:relative;
			top:20%;
			text-align:middle;
			width:95%">
				Menu item 1 | Menu item 2 etc
		</div>

		</div>
		
		<div style="top:5%;
			position:relative;
			width:95%;
			height:65%;
			border: thin solid black;
			background-color:rgb(250,250,250)">

		<h1>Content</h1>

		</div>

		</div>
		</center>
	</body>
</html>
    style.css:
    Code:
    body
{
	background-image: url("images/bg.png");
	background-repeat: repeat-x;
	background-attachment: fixed
}
div.main
{
	border: medium solid black;
	background-color: white;
	width: 50%;
	min-height:500px;
	height:75%
}
    Help is appreciated.

    &#12354;&#12426;&#12364;&#12392;&#12358;&#12290;
    Thanks.
     
    Share
  3. Unread #2 - Apr 20, 2008 at 7:07 AM
  4. TDD
    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0

    TDD Web Design Expert
    Do Not Trade

    IE CSS sizing issues
    add this below the two clumn bit:

    <div class="clear"></div>

    and add this in your css:

    div.clear {
    clear: both;
    }

    and that'll fix it.

    EDIT: Nvm, i looked at the photos and worked it out from there, not the css, hold up and lemme read it.

    you'd be better off doing it this way:

    <body>
    <container div>
    <div for head>
    <div for logo></div>
    <div with a left float for menu item 1></div><div with a right float for menu item 2></div>
    </div><!-- end of head div -->​
    <content div>

    </div>



    </container div>
    </body>
     
    Share
< Are there sites with codes of php dor tutorials? | Default RuneScape Page >

Users viewing this thread
1 guest


 
 
Adblock breaks this site