Uniform code in internet explorer and google chrome [Archive]

ckrauskopf

12th September 09, 11:59 PM

Help...

In chrome it looks aligned correctly but in internet explorer it looks quite off.

What can be done to my code to ensure they open identically?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Homepage.css" />

<title>Krauskopf Images | Buy Art</title>

</head>

<body>

<h1 class="header">Krauskopf Images</h1>

<div id="middleintro">
<h2 id=homepage> Kyle Krauskopf</h2>

</div>

<div id="leftmargin">
asdf

</div>

<div id="rightmargin">
asdfds

</div>

</body>
</html>

CSS

div#middleintro {position:relative; padding:0px 0px 0px 0px;margin-top:1px; margin-left:150px; margin-right:150px; border: thick solid #000000; font-family: 'Arno Pro Caption'; font-size: 10px; color: #000000; background-color: #EAC68E;}
div#leftmargin {height: 300px;position: relative; top:-3.4em; margin:1px 0px 0px 0px; background: url(background.jpg); width:142px;border: medium solid #000000; }
div#rightmargin {position: absolute; right:-1px; top:6.2em; height: 300px; background: url(background.jpg); width:142px;border: medium solid #000000; }

html, body {margin:0; padding:0; left:0; margin-top:0;padding-top:0;}
h1.header {position:relative; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-position: left top; border: medium solid #000000; font-family: 'Brush Script Std'; font-size: 70px; font-weight: 100; text-align: left; vertical-align: baseline; padding-top: 10px; background-repeat: no-repeat; background-attachment: fixed; background-color: #EAC68E}

ckrauskopf

13th September 09, 12:44 AM

Okay, I figured it out but now I'm trying to put text into the <div id="middleintro"> and it won't stay inside of the box. It just keeps going and doesn't wrap to the next line if the browser isn't big enough.

meesa

13th September 09, 01:07 AM

Please repost your HTML and CSS, or just one if only one changed.

Also, please put all you code into the [code][/code] tags

Rayzur

13th September 09, 04:33 AM

Hi,
You really don't need to be using absolute positioning for your columns as it will cause problems if you want equal columns.
I have a Content First Equal Column Layout (http://www.css-lab.com/Content-First/3-col-min-max-soc.html) that has been cross browser tested. I adapted it to your color scheme the best I could without seeing your images.

Run this through your browser

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="Homepage.css" />
<title>Krauskopf Images | Buy Art</title>
<style type="text/css">
* {margin:0;padding:0;}
body {
background: #fff;
font-size:100%;
}
#wrapper {
min-width:700px;
overflow:hidden;/*contain inner floats/IE7 haslayout*/
background:#CCC;/*sidebar color*/
border: 4px solid #000;
}
#container {
margin-left:150px;
margin-right:150px;
border-left: 4px solid black;
border-right: 4px solid black;
min-height:300px;/*IE7 haslayout*/
background:#EAC68E; /*middle color*/
}
* html #wrapper,
* html #container {height:300px;overflow:visible;}/*IE6 haslayout/min-height*/

#inner {
float:left;
position:relative;/*IE6/7 need this to re-position left and right columns on viewport resize*/
width:100%;
}

h1.header {
padding:10px 0 0 0;
font-family: 'Brush Script Std';
font-size: 4.5em;
font-weight: 100;
vertical-align: baseline;
border-bottom: 4px solid #000;
background:#EAC68E url(bgimage.jpg) no-repeat top left;
}
#middle {
float:right;
width:100%;/*IE6/7 haslayout*/
padding-bottom:10px;
position:relative;
font-family: 'Arno Pro Caption';
font-size: .75em;
color: #000000;
background: #EAC68E;/*same as container BG*/
}
#left {
float:left;
width:150px;
position:relative;
margin-left:-154px;
padding-bottom:10px;
}
#right {
float:right;
width:150px;
position:relative;
margin-right:-154px;
padding-bottom:10px;
}
#footer {
clear:both;
height:1.65em;
line-height:1.65em;
text-align:center;
background:#EAC68E; /*middle color*/
border-top: 4px solid #000;
}
.clear {clear:both}
h2,p {padding:5px;}

</style>
</head>
<body>
<div id="wrapper">
<h1 class="header">Krauskopf Images</h1>
<div id="container">
<div id="inner">
<div id="middle">
<h2 id=homepage> Kyle Krauskopf</h2>
<p>Lorem ipsum dolor sit amet consectetuer penatibus malesuada sem hendrerit Nulla. Tellus Maecenas egestas elit montes Sed sociis ac tristique metus Donec. Congue nibh vitae orci lorem Nam massa eget Sed ac a. Parturient nisl ac sem pede accumsan Integer ornare feugiat Mauris orci. Dui sed et congue vitae malesuada tempus augue sapien amet consequat. Justo Nulla eu laoreet pretium dui porttitor consequat.</p>
<p>Urna urna Vivamus consequat turpis consequat pellentesque pellentesque tortor vitae Pellentesque. Pede vitae justo vitae Quisque porttitor consectetuer ligula malesuada non rhoncus. Consectetuer at tincidunt amet enim in eget gravida et nec laoreet. At eu nascetur rutrum pulvinar fringilla vitae tincidunt auctor Proin libero. Fames nibh wisi Vestibulum auctor porttitor libero egestas Maecenas tellus massa. Sagittis Morbi dis metus Lorem Suspendisse vel sed urna interdum ipsum. Sed.</p>
<p>Tempus est consectetuer massa Quisque pharetra ipsum eget at condimentum sed. Tortor elit vitae velit magnis interdum id non leo hendrerit sem. Porttitor nunc Nunc egestas sapien ut risus mattis porta Aliquam Nam. Pretium Suspendisse leo Cras pede Vivamus fringilla non Nulla urna malesuada. Nisl faucibus enim dictum suscipit Morbi turpis at gravida urna consequat. Orci Fusce laoreet nibh congue elit.</p>
<p>Pretium nibh mattis vitae nibh quam nec Vestibulum nulla Curabitur consequat. Sagittis ipsum tristique vitae hendrerit malesuada Vivamus felis Lorem et vel. Euismod leo Curabitur Aenean cursus malesuada Sed congue Maecenas Phasellus dictum. Nunc id tempus magna in Nunc ipsum Nulla lacinia semper Pellentesque. Accumsan consequat turpis wisi eu tincidunt Nulla elit ornare ante dolor. Facilisis laoreet Vivamus velit.</p>
</div>
<div id="left">
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
</div>
</div>
<div id="right">
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<h4>footer stuff</h4>
</div>
</div>
</body>
</html>

ckrauskopf

13th September 09, 07:32 AM

Awesome. It work perfectly. Thanks.