This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 6 years ago.
EDIT: here is a link to whats going on http://flameforged.altervista.org/games/gd/
I have 4 divs inside the <main> element I have styled them to display all on the same line straight across no matter what.
When I have lets say <h3>Title</h3> in all the divs they all display correctly still but once I add a little input field <input type="text"> all the other divs appear to be moved down.
I am not sure how to fix the issue here is my css and html
body{
width: 100%;
height: 100%;
}
header{
background-color: #c0c0c0;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #c4bac4;
}
.nav-bar{
display: inline;
float: right;
}
.panel{
display: inline-block;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #c4bac4;
width: 24%;
height: 100%;
padding: 2px;
margin-left: 0%;
}
<main>
<div class="panel" id="researchPanel">
<h3>Research</h3>
</div>
<div class="panel" id="typerPanel">
<h3>HTML Terminal</h3>
<form>
<input type="text" class="typer" id="typer" placeholder="Type an HTML tag">
</form>
</div>
<div class="panel" id="employeePanel">
<h3>Employees</h3>
</div>
<div class="panel" id="upgradesPanel">
<h3>Upgrades</h3>
</div>
</main>
Give vertical-align: top to panel. here is your working answer
body{
width: 100%;
height: 100%;
}
header{
background-color: #c0c0c0;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #c4bac4;
}
.nav-bar{
display: inline;
float: right;
}
.panel{
display: inline-block;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 1px solid #c4bac4;
width: 24%;
height: 100%;
padding: 2px;
margin-left: 0%;
vertical-align: top;
}
<main>
<div class="panel" id="researchPanel">
<h3>Research</h3>
</div>
<div class="panel" id="typerPanel">
<h3>HTML Terminal</h3>
<form>
<input type="text" class="typer" id="typer" placeholder="Type an HTML tag">
</form>
</div>
<div class="panel" id="employeePanel">
<h3>Employees</h3>
</div>
<div class="panel" id="upgradesPanel">
<h3>Upgrades</h3>
</div>
</main>
Related
This question already has answers here:
Progress element html text inside
(4 answers)
Closed 2 years ago.
<div class="progress-bar-title">
Blabla - %48
</div>
<div id="progressbar" style="width:250px;background-color:#00a0b0;border-radius:6px;padding:3px;">
<div style="background-color: #ffffff;width:48%;height:10px;border-radius:4px;"></div>
</div>
I am using this code but I want this "Blabla - %48" text in the progress bar. How can I do this?
like this but no loading bar, normal progress bar.
.container{
width: 300px;
height: 20px;
background-color: #a1abb3;
border-radius: 20px;
-moz-box-shadow: inset 0 0 10px #00000060;
-webkit-box-shadow: inset 0 0 10px #00000060;
box-shadow: inset 0 0 10px #00000060;
}
.progress{
background-color: #e4c14a;
height: 20px;
border-radius: 20px;
-moz-box-shadow: inset 0 0 10px #00000060;
-webkit-box-shadow: inset 0 0 10px #00000060;
box-shadow: inset 0 0 10px #00000060;
}
.load-text{
color: gray;
font-size: 10px;
line-height: 20px;
float: right;
margin-right: 10px;
}
<div class="container">
<div class="progress" style="width:48%">
<span class="load-text">Blabla - 48%</span>
</div>
</div>
Just change the location of the text, and adjust some attributes
<div id="progressbar" style="width:250px;background-color:#00a0b0;border-radius:12px;padding:3px;">
<div style="background-color: #ffffff;width:48%;height:20px;border-radius:8px;">
<span class="progress-bar-title" style="color: black;font-size:80%"> Blabla - %48</a>
</span>
</div>
</div>
You can create two div's.
.container{
margin-top: 1rem;
width: 10rem;
background-color: #e5e5e5;
border-radius: 0.4rem;
}
.progress{
background-color: green;
height: 1rem;
padding: 0;
border-radius: 0.4rem;
display: flex;
justify-content: flex-start;
}
.progress span{
color: #fff;
filter: brightness(2);
font-weight: 700;
}
<div class="container">
<div class="progress" style="width:40%">
</div>
</div>
<div class="container">
<div class="progress" style="width:60%">
</div>
</div>
What I want is to make my page a little responsive for desktop browsers.
For example, when I decrease the width of the browser, the left and right portion of the page should be stacked over each other. Please check the code, you'll understand. The outerLeft and outerRight div are floated left and right respectively. When I decrease the width of browser, outerRight goes below outerLeft, which is good. But then the problem is with footer and copyright (last two divs at bottom) divs. These do not get displaced because of the outerRight div. I want them to be below outerRight. How can I do this?
HTML:
<body style="margin: 0px">
<div class="outer">
<div id="header"></div>
<div class="outerLeft">
<h1><a style="text-decoration: none; color: white;" href="login.php">WinkCage</a></h1>
<br />
<p>Instant Messaging web application</p>
</div>
<div class="outerRight">
<div class="loginform">
<form name="form2" method="post">
<table>
<tr>
<td><input type="text" name="uname" placeholder="Username" required/></td>
<td><input type="password" name="pass" placeholder="Password" required/></td>
<td><input id="logbutton" type="submit" name="sub" value="Login"/></td>
</tr>
</table>
</form>
<p><?php echo $loginerror; ?></p>
</div>
<div class="signform">
<form id="signupform" name="form1" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><input type="text" name="name" placeholder="Enter your name" required /></td>
<td rowspan="3"><div class="propic"><img id="imgid" src="images/dp.png" /></div>
<input id="imgInput" type="file" name="image" required/></td>
</tr>
<tr>
<td><input type="text" name="username" placeholder="Enter username" required pattern="[a-zA-Z0-9]{6,}" title="The username must contain minimum 6 and ONLY alphanumeric characters."/></td>
</tr>
<tr>
<td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no." pattern=".{10}" required title="Invalid entry. Minimum 10 digits are required."/></td>
</tr>
<tr>
<td><input id="typechange" type="password" name="password" maxlength="12" placeholder="Enter password" required pattern="[a-zA-Z0-9]{5,}" title="The password must contain at least 5 and ONLY alphanumeric characters."/>
<div id="seepass"></div></td>
<td><input type="submit" id="button" name="submit" value="Sign Up"></td>
</tr>
</table>
</form>
<div id="userexist"></div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
</div>
<div style="font-family: calibri; text-align: center; color: black; font-size: 16px; padding: 5px 0px 5px 0px;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
<div style="height: 7px; box-shadow: 0px 0px 1px 1px grey; background-color: white; display: block"></div>
</body>
CSS:
html, body{
height: 100%;
background-color: aquamarine;
}
#header{
height: 20%;
}
.outer{
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
}
.outerLeft{
float: left;
width: 320px;
height: auto;
text-align: center;
margin-top: 145px;
padding-left: 50px;
}
.outerRight{
padding-left: 50px;
float: left;
width: auto;
height: auto;
}
.loginform{
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 20px 23px;
background-color: white;
color: red;
}
.loginform input{
width: 187px;
height: 21px;
padding-left: 5px;
}
#logbutton{
background-color: #00CC66;
color: white;
font-weight: bold;
width: 70px;
height: 28px;
cursor: pointer;
}
.signform{
margin-top: 20px;
margin-left: 0px;
height: auto;
width: 480px;
box-shadow: 0px 0px 15px 0px grey;
border-radius: 3px;
padding: 20px 20px 10px 20px;
background-color: white;
}
.signform input{
width: 250px;
height: 24px;
font-size: 20px;
padding: 5px 10px 5px 10px;
margin-bottom: 10px;
}
#button{
background-color: #0099FF;
color: white;
width: 188px !important;
height: 41px !important;
border-radius: 4px;
border: 0px solid grey;
display: block;
font-weight: bold;
margin-left: 10px;
cursor: pointer;
box-shadow: inset 0px 0px 4px grey;
text-shadow: 1px 1px 2px black;
}
.propic{
height: 100px;
width: 100px;
margin: 0 auto;
border: 4px solid white;
box-shadow: 0px 0px 1px 1px grey;
border-radius: 2px;
background-color: grey;
}
#imgInput{
width: 187px !important;
height: 22px !important;
font-size: 14px;
padding: 0px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cccccc;
margin-left: 10px;
}
#imgid{
height: 100px;
width: 100px;
}
You need to give it a clear: both just this!
<div style="font-family: calibri;text-align: center;color: black;font-size: 16px;padding: 5px 0px 5px 0px;clear: both;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>
jsFiddle
Note: I suggest you to do not use inline-css
Not sure what you want..
Since you have an element with height 94% - I'd say you always want to see that footer (being fixed on the bottom..) and generate the scroll just for that outer element.
If that's what you want, you can just include an overflow: auto in the .outer class.
.outer {
max-width: 1024px;
margin: 0 auto;
height: 94%;
display: block;
overflow: auto;
}
Take a look here..
https://jsfiddle.net/uvqk4eeL/1/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a problem with a css style. It happen when I set height to auto website
access live view by diung this go to newproject.comli.com/post.php log in with a username = shining password = asdfgh123 and then manualy go to newproject.comli.com/details.php
so my div height gets set to 0 do not know why. I am talking about #itemsCategListsform could someone help me? Here is my code:
<div id="itemsCategListsform">
<div id="plink">
<div id="open">My details</div>
<div id="closed">My ads</div>
<div id="closed">Favorites</div>
</div>
<div id="pbase">
<div id="detailforms">
<p> Email:
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<input type="email" name="email" size="30">
<input class="submit-buttonform" type="submit" name="updateemail" value="Update Email">
</form>
</p>
<p>
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
Password: <br>
<input type="password" name="password" size="30"><br>
Re-Password: <br>
<input type="password" name="repassword" size="30">
<input class="submit-buttonform" type="submit" name="updatepassword" value="Update password" >
</form>
</p>
Phone:
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<input type="text" name="phone" size="30">
<input class="submit-buttonform" type="submit" name="updatephone" value="Update phone">
</form>
Website:
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<input type="text" name="website" size="30">
<input class="submit-buttonform" type="submit" name="updatewebsite" value="Update website">
</form>
</div>
</div>
</div>
and css :
#itemsCategListsform {
background-color: white;
position: relative;
width: 930px;
height: auto;
left: 175px;
top: 20px;
border-radius: 4px;
border: 1px solid #1a171a;
padding-top: 40px;
padding-left: 70px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
}
#plink {
position: relative;
width: 200px;
float: left;
border-top: 1px solid black;
border-left: 1px solid black;
z-index: 10;
border-radius: 4px 0 0 4px;
-webkit-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6);
-moz-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6);
box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6);
}
#open {
border-bottom: 1px solid black;
border-right: 1px solid #fbfbfe;
text-align: center;
line-height: 50px;
background-color: #fbfbfe;
}
#closed {
border-bottom: 1px solid black;
width: 200px;
text-align: center;
line-height: 50px;
}
#pbase {
border: 1px solid black;
background-color: #fbfbfe;
position: relative;
width: 600px;
height: auto;
float: left;
margin-left: -1px;
border-radius: 0px 4px 4px 4px;
-webkit-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6);
-moz-box-shadow: -3px 3px 5px -3px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px -3px rgba(0,0,0,0.6);
}
#closed:hover a {
display: block;
background-color: #fbfbfe;
border-right: 1px solid black;
}
#open:hover a {
display: block;
}
#detailforms {
position: relative;
margin:0 auto;
top: 10px;
width: 450px;
height: auto;
margin-bottom: 40px;
}
The height is registering as 0 because the child element is floated. CSS float takes an element out of the flow of content and wraps inline elements around it.
Your problem is here:
<div id="itemsCategListsform">
<div id="plink">
...
#plink{ float: left; }
#phase{ float: left; }
I'd recommend adding a pseudo element after the parent with clear: both set.
<div id="itemsCategListsform" class="clearfix">
<div id="plink">
...
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
See some additional solutions here.
Add display: inline-block to the css of itemsCategListsform :)
okay with a help of DACrosby was solved easily as he said that because of float left and to solve that i just add overflow: auto; tell me if i did good or there is better solution cuz this was really easy and seems to be okay everything
('Boy... I saw on search that misalign topic about the <input> wrapped on an <a> tag... LOL)
Anyway...
I'm in a bit of a pickle here... I have a bunch of divs as an inline block lead by a lone <button>, and this lone button --- no matter how much design genius I summon from myself, I can't get to align properly.
Just look at the code at the end of the post.
Notes:
The button-holder class didn't used to exist; it was just the <button><span> combo. I added it thinking I can fix it by doing negative values on the margin (to no avail).
Can anyone advise?
FULL code:
<style type="text/css">
body { margin:0; padding:0;font-size: 9pt; }
#main { margin: 0; padding: 0; width:100%; text-align:center; }
#bar {display: table; margin: 0; padding: 0; width:100%; height:45px }
[class~=banner] { font-size: 14pt;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display: table-cell;
height: 45px;
vertical-align: middle;}
.cellOne { background-color:#FFC316;
color: #35549A;
width: 8%;
text-align:center;}
.cellTwo { background-color: #35549A;
color: #FFF;
padding: 0px 0px 0px 2%;
width: 68%;
text-align: left;}
.cellThree { background-color: #35549A;
color: #FFC316;
width: 12%;
text-align: left;}
#three_element {margin: 0 auto; padding:0% 18.5% 0% 18.5%; text-align:center; }
.button-holder {
width: 250px;
height: calc(250px / 1.604);
margin: -1.45% 1.5% -1.65% 1.5%;
display:inline-block;
padding:5px;
box-sizing:border-box;
}
#addbutton {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
display:table;
border: 0px;
box-sizing:border-box;
padding:0px;
margin:0px;
background-color:#E6E7E8;
text-align:center;}
#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: calc(240px / 1.604);
vertical-align: middle;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
[class~=objective-edit-tile] {
width: 250px;
height: calc(250px / 1.604);
margin: 1.5%;
display:inline-block;
box-sizing:border-box;
padding:5px;}
[class~=objective-edit-tile] div {
font-family:"Yanone Kaffeesatz","Arial Narrow",Arial,sans-serif;
box-sizing:border-box;
color:#FFFFFF;
margin:0px;
display:inline-block;
}
.tr-1-square-red div {background-color: #BE1E2D;}
.tr-1-square-yellow div {background-color: #E39F15;}
.tr-1-square-green div {background-color:#266733;}
.text-block-name {
border-radius: 25px 25px 0px 0px;
-moz-border-radius: 25px 25px 0px 0px;
-webkit-border-radius: 25px 25px 0px 0px;
border:#FFFFFF 1px solid;
width: 100%;
height: 66.7%;
font-size: 180%;
padding-top:17%;
}
.text-block-days {
border-radius: 0px 0px 0px 25px;
-moz-border-radius: 0px 0px 0px 25px;
-webkit-border-radius: 0px 0px 0px 25px;
border-top: #FFF 1px solid;
font-weight:700;
width: 34%;
height: 33%;
padding-top:6.5%;}
.text-block-next-step {
border-radius: 0px 0px 25px 0px;
-moz-border-radius: 0px 0px 25px 0px;
-webkit-border-radius: 0px 0px 25px 0px;
border-top: #FFF 1px solid;
font-size:9px;
width: 64%;
height: 33%;
padding:8% 2px 0px 1px;}
</style>
</head>
<body>
<div id="main">
<div id="bar">
<div class="banner cellOne">Pipeline</div>
<div class="banner cellTwo"> <Title> </div>
<div class="banner cellThree">PracticePipeline.com</div>
</div>
<div role="content" id="three_element">
<div class="button-holder">
<button id="addbutton" name="buttton">
<span class = "add">+</span>
</button>
</div>
<div class = "tr-1-square-red objective-edit-tile" id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>
</div>
<div class = "tr-1-square-yellow objective-edit-tile " id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>
</div>
<div class = "tr-1-square-green objective-edit-tile " id="tile-n">
<div class = "text-block-name" >Stark Indust.. </div>
<div class = "text-block-days" > 7 Days</div>
<div class = "text-block-next-step" >Invite Stark Industri.. </div>
</div>
</div>
</div>
</body>
I dont know if this is going to help much but it worked when i tried it.
The tag padding-bottom keep making a little bit higher if you want it to align better.
#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: 140px;
vertical-align: middle;
margin: 0px;
padding: 0px;
box-sizing: border-box;
padding-bottom: 7%
}
I actually solved my own problem:
The problem was just that I was over analyzing things. Basic lay-outing worked:
.button-holder {
margin:1.5%;
display:inline-block;
padding:5px;
box-sizing:border-box;
}
#addbutton {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
width: 240px;
height: calc(250px / 1.604 - 10px);
border: 0px;
margin:0px;
padding: 0px;
background-color:#E6E7E8;
box-sizing:border-box;
text-align:center;
}
#addbutton .add {
font-size: 97px;
color: #384D94;
}
My website is currently breaking on several pages in ie7, ie8, and ie9, and of course its breaking in different ways in each browser. I've been trying to figure this out for hours and have nothing.
The problem in ie7-8 is that my various elements are not floating correctly I believe, but I'm not entirely sure.
Here are some screencaps
Here is a link to the test page: testsite
And here is the code:
<?php include("includes/header.html");?>
<div id="content">
<div id="toolbar" class="dropshadow" style="background-color: #181818">
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
<hr noshade color = "#373737"/>
<ul>
<li>
<a href="inventory.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Showroom','','images/toolbar/carhover.png',1)">
<img src="images/toolbar/car.png" alt="Showroom" name="Showroom" width="89" height="55" border="0" id="Showroom" style="margin-left: 7px;"/>
<h3>Our Vehicles</h3>
</a>
</li>
<li>
<a href="shipping.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shipping','','images/toolbar/shippinghover.png',1)">
<img src="images/toolbar/shipping.png" alt="Shipping" name="Shipping" width="97" height="55" border="0" id="Shipping" />
<h3>Shipping</h3>
</a>
</li>
<li>
<a href="financing.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Financing','','images/toolbar/financinghover.png',1)">
<img src="images/toolbar/financing.png" alt="Financing" name="Financing" width="89" height="55" border="0" id="Financing" />
<h3>Financing</h3>
</a>
</li>
<li>
<a href="insurance.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Insurance','','images/toolbar/insurancehover.png',1)">
<img src="images/toolbar/insurance.png" alt="Insurance" name="Insurance" width="64" height="55" border="0" id="Insurance" />
<h3>Insurance</h3>
</a>
</li>
<li>
<a href="auto-locator.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('AutoLocator','','images/toolbar/autolocatorhover.png',1)">
<img src="images/toolbar/autolocator.png" alt="AutoLocator" name="AutoLocator" width="104" height="55" border="0" id="AutoLocator" />
<h3>Auto Locator</h3>
</a>
</li>
</ul>
</div>
<div id="searchbox" class="dropshadow">
</div>
<div id="advsearch" class="dropshadow">
</div>
<div id="links" class="dropshadow" style="background-color: #181818">
</div>
</div>
</div>
<div id="bannerads" class="dropshadow">
</div>
Here is the CSS sheet specific to this page. If you need the main page for the site I can get it for you, but that style sheet works fine on other pages so I believe the problem is here.
#charset "utf-8";
/* CSS Document */
#bannerads{
margin: 9px 0px 5px 6px;
float: left;
width: 728px;
height: 90px;
padding: 6px 128px;
background-color: #e9e7e4;
}
#toolbar{
float: left;
width: 984px;
height: 150px;
position: relative;
z-index: 1;
margin: 0px 6px 0px 6px;
background-color: #181818;
background-image: url(../images/toolbar.png);
background-position:right top;
background-repeat:no-repeat;
}
#toolbar hr{
float: left;
width: 600px;
margin: 4px 300px 0px 30px
}
#toolbar ul{
list-style:none;
padding:0;
}
#toolbar li{
float: left;
margin: 10px 0px 0px 31px;
}
#toolbar a{
color: #e9e7e4;
}
#toolbar a:hover{
color:#e9e7e4;
text-decoration:underline;
}
#searchbox{
float: left;
clear: both;
width: 446px;
height: 402px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#toolbar li h3{
color: #e9e7e4;
font-size: 13px;
margin-top: 4px;
margin-bottom: 10px;
text-align:center;
}
#advsearch{
float: left;
width: 446px;
height: 242px;
background-color: #e9e7e4;
margin: 9px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#links{
float: left;
width: 446px;
height: 132px;
background-color: #181818;
margin: 8px 6px 0px 6px;
padding: 10px 20px 10px 20px;
}
#arrow{
margin-left:-93px;
width: 68px;
height: 135px;
float: left;
position: relative;
}
.header1{
color: #e9e7e4;
font-size: 28px;
margin: 8px 0px 0px 30px;
float: left;
}
.header2{
color: #e9e7e4;
font-size: 16px;
float:left;
margin: 22px 0px 0px 220px;
}
#showinvheader{
color: #e9e7e4;
font-size: 14px;
margin-bottom: -2px;
text-align:center;
}
Lastly, here is the css sheet I'm using for compatibility with ie:
/* CSS Document */
.Navigation{
border: solid #181818 1px;
margin: -15px 5px 0px 5px;
}
.bigbox{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
.smallbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#banner{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#headerimg{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#contentbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#bannerads2{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#toolbar{
border: solid #181818 1px;
margin: -1px 5px 0px 5px;
}
#featured{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#searchbox{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#advsearch{
border: solid #aaa 1px;
margin: 7px 5px 0px 5px;
}
#links{
border: solid #181818 1px;
margin: 7px 5px 0px 5px;
}
Well, for starters, your X-UA-Compatible header is messed up. You have a weird quot; value in there. This is likely preventing newer versions from rendering as IE7. However, you should probably just always render in standards mode, and make subtle changes for each browser using conditional comments.
If you must use the x-ua-compatible, then you should do it as an http header, rather than as a meta tag. PHP allows you to addheaders before it starts writing data to the client. Add the header there.
Upon further examination, your code is.. Crap. It's got 180+ validation errors, including things like putting block level elements in header elements. I would suggest making your HTML validate before anything else, as invalid code is the #1 reason for things to render differently on different browsers.
http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2fspecialtysales.nfshost.com%2flookingtobuy2.php
Ok, sorry it took so long for me to write this...
The reason the code was malfunctioning was that a header tag didn't get closed.
<h1 class="header1">Looking to <font color="ed1c2e">Buy</font>?</h1>
<h2 class="header2">Buyers Tools:<h2>
So, if you're experiencing a similar problem make sure your tags are all closed.