|
CSS - Problems In Ie; Margin:auto
First things first, both my HTML and CSS validate.
I'm very VERY green with CSS, but because other people don't seem to think so I'm making a website. My trouble is with IE. The website is perfect in Firefox. I have this div: css Code: Original - css Code div.main { background-color: white; margin-left: auto; margin-right: auto; width: 35em; border-width: .1em; border-color: #aa505f; border-style: solid; text-align: left; } .alignment { text-align: center }
And this address stuff: CSS Code: Original - CSS Code address { background-color: #FFFFFF; margin-right: 5em; width: 15em; border-width: .1em; border-color: #aa505f; border-style: solid; float: right; line-height: 1em }
address {
HTML: HTML Code: Original - HTML Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL"> <html> <head> <title> Le Sac Magique </title> <link href="lsmcss.css" rel="stylesheet" type="text/css"> </head> <body> <address> Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a> </address> <div class="alignment"> <div class="main"> This is some text! </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "BLOCKEDURL"> <html> <head> <title> Le Sac Magique </title> <link href="lsmcss.css" rel="stylesheet" type="text/css"> </head> <body> <address> Contact XXXXX by mobile at XXXXXXXX, or <a href="mailto:XXXXXXX">email her at THIS BLOCKED EMAIL ADDRESS.</a> </address> <div class="alignment"> <div class="main"> This is some text! </div> </div> </body> </html> In Firefox, it shows as it should a centered box with a white background and maroon border and a right-aligned box of the same description besides its italics. However, in IE the box that should be centered is pushed to the left a bit. It is as if the box is aligned left and has a left margin. I am aware that IE does not support margin:auto, but I have tried as you can see to fix it by using text-align:center and a parent div to no avail. Something tells me that my floated box is the source of this trouble, but I would not know where to start. Can anyone help me? Similar TutorialsHi, I have the following code, but the div is not appearing in the center despite me using margin 0 auto. Can anyone suggest a way to centralise the div? PHP Code: left: 0px; bottom: 0px; position:fixed; width: 98%; margin: 0 auto; background: url(../images/drop_bg.png); -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 0px 0px 10px; -khtml-border-radius: 0px 0px 10px; border-radius: 0px 0px 10px; z-index: 1000; Thanks http://www.moridin.moved.in/blog/ That says about it all. Thank you for your time On this page - http://www.mts-diesel.com/index.php, it shows as wanted in FF, but in IE9, the main body is left aligned. I tried declaring margin:0 auto but it will take effect. Any help would be appreciated. Tom Hi, I have recently changed to using a DIV layout when designing sites. One problem i have noticed is that the margin:0 auto; doesn't work in IE5.5 What can I do to get around this? Many Thanks, Jonathan. i think there is a problem with margin: 0 auto; for ie6. Can you try these code in your IE? I know it's a bug but i couldn't find the solution. Code: <div style="width:250px; background-color: #DFDFDF; margin: 10px auto; text-align:center; padding: 4px;">hello world</div> do you have an idea? thanks. www.ahmetalpbalkan.com I'm still fairly new with CSS. I cannot get margin: auto; to work in IE. Working fine in Mozilla. There was a brief bit where I got it to work, but I have no idea what I did, nor how to do it again...LOL(slightly sarcastic laughter). Anyway, it's making me crazy and maybe someone can help me out. I've stripped the code down to my CSS body and area div I've been setting my stuff in. Code:
<html>
<head>
<title>Dude Work Web Page</title>
<style type="text/css" media="screen">
body {
background: #999;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
#area {
background: #FFFAFA; display: table;
width: 776px;
margin: 0 auto;
border: 5px double black;
height: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="area">
What is it that keeps this from having auto margins in IE???
</div> <!-- end area -->
</body>
</html>
Much thanks, James Why Oh Why?? Internet Explorer.... *gripe gripe* I have this basic code... Code:
#rightside {
float:right;
width:315px;
}
#rightside_top {
height:6px;
background:url(/images/rightbg_top.gif) no-repeat;
}
#rightside_bottom {
height:800px;
background:url(/images/rightbg_bottom.gif);
}
<div id="rightside">
<div id="rightside_top"></div>
<div id="rightside_bottom"></div>
</div>
It looks great in anything that isn't IE... but IE adds about 10px under the first div (rightside_top), which breaks the image effect i am trying to accomplish anyone know how to efficiently get rid of this gap?? hello i have a div acting as a container for a layout and i'm using the following to center it on the browser window, having a background image and two borders: Code:
#master { position: relative; top: 0;
width: 46em;
margin: 0 auto;
background-image: url(../img/bg/.gif);
border-right: 1px solid #FA933C;
border-left: 1px solid #FA933C;
}
this works great on internet explorer, however, on other browsers it doesn't do so well; on netscape it centers the layer but it doesn't display the background/borders. on firefox it does the same thing. on opera it centers and displays the background, but it leaves a gap between the top margin and the top of the layer, even though the document margins are set to zero. is there a way to fix this? i suppose i could use position: absolute and then figure out a percentage away from the left margin... but this way is a lot better since the browser figures everything out neatly. hope someone can help out. thx in advance! I'm trying to get this div to center on teh page all teh way back to IE5. I'm using the box model, but I still can't get this thing to work. Any ideas on how to get it working? http://www.ira-soup.com http://www.browsercam.com/public.aspx?proj_id=296123 yui.lastsong.net/projecthealth I'm having problems getting the above page to show up correctly in IE6. My headers have a negative left margin and, for some reason, paragraphs below these headers seem also to be displaying this negative margin. It doesn't happen for all paragraphs, and I haven't been able to discern any pattern. The following page is an example of this: yui.lastsong.net/projecthealth/?page=team-staff Additionally, this page is misaligned, despite using essentially the same coding from my other pages (with the exception of the content): yui.lastsong.net/projecthealth/?page=impact-families Any ideas on how to fix this? Hello, I don't understand how to fix this right margin problem in IE 6. Of course, the code renders correctly in FF Mac/Win but I can't get the margin right to correctly display as 30px in IE 6. If you can help me out I would appreciate it. Code: #altnavcontainer
{
margin: 68px 30px 0px 0px;
padding: 0;
width: 264;
float: right;
/*border: 1px solid red;*/
}
<div id="altnavcontainer">
<a href="info.php?pt=info" onmouseover="document.info.src=info_on.src" onmouseout="document.info.src=info_off.src"><img name="info" src="images/info_off.png" alt="Info Off" /></a>
<a href="bio.php?pt=bio" onmouseover="document.bio.src=bio_on.src" onmouseout="document.bio.src=bio_off.src"><img name="bio" src="images/bio_off.png" alt="Bio Off" /></a>
<a href="work.php?pt=work" onmouseover="document.work.src=work_on.src" onmouseout="document.work.src=work_off.src"><img name="work" src="images/work_off.png" alt="Work Off" /></a>
<a href="index.php" onmouseover="document.home.src=home_on.src" onmouseout="document.home.src=home_off.src"><img name="home" src="images/home_off.png" alt="Home Off" /></a>
</div>
Thanks, Jason Hi all, and thanks for reading. I'm doing my first big DIV-based design, and have got it working pretty well, except that I'm getting a fairly large top and slightly large bottom margin on one of the nested DIVs. This has a border running around it, so I really don't want it there. Here's the stylesheet: Code:
<style type="text/css">
BODY {margin:0; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:16px; background-color:#F1F1F1; text-align:center; background-image:url(images/background.gif);}
DIV {background-color:#FFFFFF;}
#container {width:800px; text-align:left; margin:0 auto; border-left:solid 6px #007EC3; border-right:solid 6px #007EC3; border-bottom:solid 6px #007EC3;}
#header {border-bottom:solid 6px #F1F1F1;}
#bodycontainer {border-bottom:solid 6px #F1F1F1; margin:0;}
#menucontainer {width:192px; float:left; clear:left; margin:0;}
#menucontainer DIV {border-top:solid 2px #CCCCCC;}
#contentcontainer {margin-left:192px; border-right:solid 6px #F1F1F1; border-left:solid 2px #007EC3;}
#contentcontainer P {margin-left:20px; margin-right:20px;}
#footer {text-align:center; font-size:12px; font-weight:bold; border-top:solid 2px #007EC3;}
#footer P {margin-top:5px; margin-bottom:5px;}
#footer A {color:#007EC3; text-decoration:underline;}
#footer A:hover {color:#007EC3; text-decoration:none;}
</style>
Here's the processed HTML: Code:
<div id="container">
<div id="header"><img src="images/header.jpg" alt="The International Wildlife Museum" width="800" height="110"></div>
<div id="bodycontainer">
<div id="menucontainer">
<div style="border-top:0;"><a href="info/" onmouseover="changeImage('info',true);" onmouseout="changeImage('info',false);"><img src="images/menu/4/info.gif" name="info" alt="General Info" border="0"></a></div>
<div><a href="about/" onmouseover="changeImage('about',true);" onmouseout="changeImage('about',false);"><img src="images/menu/4/about.gif" name="about" alt="About Us" border="0"></a></div>
<div><a href="exhibits/" onmouseover="changeImage('exhibits',true);" onmouseout="changeImage('exhibits',false);"><img src="images/menu/4/exhibits.gif" name="exhibits" alt="Exhibits" border="0"></a></div>
<div><a href="tour/" onmouseover="changeImage('tour',true);" onmouseout="changeImage('tour',false);"><img src="images/menu/4/tour.gif" name="tour" alt="Tour Info" border="0"></a></div>
<div><a href="education/" onmouseover="changeImage('education',true);" onmouseout="changeImage('education',false);"><img src="images/menu/4/education.gif" name="education" alt="Educational Programs" border="0"></a></div>
<div><a href="events/" onmouseover="changeImage('events',true);" onmouseout="changeImage('events',false);"><img src="images/menu/4/events.gif" name="events" alt="Special Events" border="0"></a></div>
<div><a href="membership/" onmouseover="changeImage('membership',true);" onmouseout="changeImage('membership',false);"><img src="images/menu/4/membership.gif" name="membership" alt="Membership" border="0"></a></div>
<div><a href="theater/" onmouseover="changeImage('theater',true);" onmouseout="changeImage('theater',false);"><img src="images/menu/4/theater.gif" name="theater" alt="Wildlife Theater" border="0"></a></div>
<div><a href="facility/" onmouseover="changeImage('facility',true);" onmouseout="changeImage('facility',false);"><img src="images/menu/4/facility.gif" name="facility" alt="Facilities/Rental" border="0"></a></div>
<div><a href="contacts/" onmouseover="changeImage('contacts',true);" onmouseout="changeImage('contacts',false);"><img src="images/menu/4/contacts.gif" name="contacts" alt="Contacts" border="0"></a></div>
</div>
<div id="contentcontainer">
<p>The International Wildlife Museum is a non-profit educational program of Safari Club International Foundation (SCIF). SCIF funds and manages worldwide programs dedicated to conservation, outdoor education and humanitarian services.</p>
<p>Founded in 1988, the museum is dedicated to increasing knowledge and appreciation of the diverse wildlife of the world, as well as explaining the role of wildlife management in conservation.<br> </p>
<div id="footer">
<p><a href="info/">General Info</a> | <a href="about/">About Us</a> | <a href="exhibits/">Exhibits</a> | <a href="tour/">Tour Info</a> | <a href="education/">Educational Programs</a></p>
<p><a href="events/">Special Events</a> | <a href="membership/">Membership</a> | <a href="theater/">Wildlife Theater</a> | <a href="facility/">Facilities/Rental</a> | <a href="contacts/">Contacts</a></p>
<p> <p><a href="http://www.safariclubfoundation.org/" target="_blank"><img src="images/sciflogo.gif" alt="SCI Foundation" width="52" height="39" border="0" align="absmiddle"></a>
<img src="images/footerinfo.gif" alt="Copyright 2004, Safari Club International Foundation" width="372" height="55" vspace="10" align="absmiddle"></p>
</div>
</div>
</div>
</div>
Here's a link to the live page The margin is above and below the text and menu. Any help would be appreciated. -colin Problem 1: I specified #pic with a height of 176px and a border of 1px. The total height should be 178px, correct? Measuring it with my handy web developer ruler, it only measures 176px tall, including the border or 174px excluding the borders. Why would this occur? Aren't borders supposed to go around an element not be included in the element? This occurs in both Firefox and IE. Problem 2: Same problem area as above, except I'm attempting to add 3px left and bottom margin around several #pic. Using my trusty ruler again, I'm getting a margin of only 1px around my #pic's. Instead, it appears that the margin is including the 1px border from the two #pics, totaling 3px. This only occurs in Firefox though, IE renders it as I would have guessed. This means that the .right content doesn't line up in either IE or Firefox, depending on which one I correct it for. Below is a picture to explain what I'm attempting to say. Here is the code (sorry I'm building it for a friend and he is working on a host -- so its local only): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body
{
background-color: #615947;
}
#container
{
width: 800px;
margin: 10px auto;
color: #333;
}
#nav
{
}
#navcontainer {
padding: 0;
height: 35px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
width: 154px;
height: 16px;
}
#navcontainer ul li a
{
position:relative;
background: #AE0000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
padding: 8px;
margin: 0 0 0 0;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
font: 13px/15px Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
}
#top
{
background-color: #AD9F7F;
background-image: url(<a href="(URL address blocked: See forum rules)" rel="nofollow">(URL address blocked: See forum rules)</a>);
background-repeat: no-repeat;
height: 150px;
width: 767px;
margin-bottom: 3px;
}
.left
{
display:inline;
border: 1px solid black;
background-color: #fff;
float: left;
width: 385px;
margin-bottom: 3px;
padding: 0;
margin-right: 3px;
}
#updates
{
height:539px;
}
#topleft
{
margin: 0px;
height: 14em;
border-bottom: 1px solid black;
}
#topleft h3
{
background-color: #9E9E9E;
margin: 0px;
color: white;
font-family: sans-serif;
padding-left: 12px;
font-size: 12px;
}
#bottomleft
{
height: 309px;
margin: 0px;
overflow: auto;
}
#bottomleft h3
{
background-color: #9E9E9E;
margin: 0px;
color: white;
font-family: sans-serif;
padding-left: 12px;
font-size: 12px;
}
.right
{
margin-left: 385px;
padding: 0;
width: auto;
background-color: #615947;
}
.pic
{
width: 186px;
height: 176px;
margin: 0px 3px 3px 0px;
border: 1px solid black;
float: left;
background-color: #616161;
}
#footer
{
clear: both;
margin: 0;
color: #333;
background-color: #AD9F7F;
border: 1px solid black;
width: 767px;
}
</style>
<title>CSS</title>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="navcontainer">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">THE ARTIST</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">GUESTBOOK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="left">
<div id="topleft">
<h3>Welcome</h3>
</div>
<div id="bottomleft">
<h3>Daves daily news</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
</div>
<div class="right">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Image link http://lh5.ggpht.com/_zKwoPOwgFUM/SyNwWAxR0ZI/AAAAAAAAAKI/CzOKCNVox3E/prob.jpg Hey there I have a small IE6 problem where my "boxR" margin-left positioned div is moving more away from left than expected but works perfectly fine in FF. 3px more to the left to be exact. This is happening to my "boxL" div also (but only 1px more to the left than expected) CSS: Code: .bigBox {background-color:#eeeeee; width:800px; clear:both;}
.leftCol {width:240px; float:left; position:relative; display:block; background-color:tan;}
.rightCol {width:560px; float:left; position:relative; display:block; background-color:lightBlue;}
.boxL {width:230px; margin-left:7px; margin-top:5px; position:relative; display:block;}
.boxR {width:550px; margin-left:3px; margin-top:5px; position:relative; display:block;}
HTML: Code: <table class="bigBox" border="0" cellpadding="0" cellspacing="0"> <tr><td valign="top"> <div class="leftCol"> <div class="boxL">Content Goes Here...</div> </div> <div class="rightCol"> <div class="boxR">Content Goes Here...</div> </div> </td></tr> </table> Pictures of problem: FF: IE6: The 2 blue boxes are "boxL" and boxR" The background color "Tan" and "lightBlue" is the "leftCol" and rightCol" divs See how the "boxL" div has moved left 1px more and the boxR has moved 3px more to the left in IE6... how can i fix this? Thanks heaps Hi, beeing fairly new to CSS I am having a hard time solving this issue, hopefully it has a simple solution which someone might help me with. Here goes, In IE this page aligns nicely at the top of the browser window just like I want it to, but in FF and Opera the whole page is moved down maybe 5px or so, the code is pasted below. Also, it seems to me that IE stacks the layers tighter, bordder to border, than FF and Opera which seems to add padding or margin to the layers. I am probably way off but I would be extremely happy for any help. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">
html{
margin:0px;
padding:0px;
}
body {
background: #FFF;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:62.5%;
text-align:center; /*fix for centering the content div for IE 5.5*/
}
#content {
width:748px;
margin:0px auto;
padding:0px;
text-align:left; /*IE 5.5 alignment fix*/
}
#tipsHeader{
height:113px;
background:#FFF url(images/Logo.gif) no-repeat top left;
margin:0px;
padding:0px;
}
#tipsHeader h1 span {
display:none;
margin:0px;
padding:0px;
}
#bigProdDisplay{
width:448px;
height:298px;
text-align:left;
float: left;
}
#productSlogan{
width:300px;
height:298px;
background: #FFF url(images/squareHeaderParotid.gif) no-repeat top left;
margin:0px;
padding:0px;
text-align:right;
float: right;
}
#productSlogan h3 span {
display:none;
}
/*==========NAV STYLES============*/
#navcontainer{
margin-bottom:25px;
}
#navcontainer ul
{
padding-left: 0px;
margin-left: 0px;
background-color: #fff;
float: left;
width: 100%;
font-family: Verdana, arial, helvetica, sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1.2em;
background-color: #fff;
color: #4E5C8D;
text-decoration: none;
float: left;
font-size: 1.2em;
font-weight: normal;
}
#navcontainer ul li a:hover
{
background-color: #fff;
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a,
#advantages #navlist-advantages a,
{
color: #F66;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
#home #navlist-home a:hover,
#advantages #navlist-advantages a:hover,
{
text-decoration: none;
}
#navlist a:active {
color: #333;
font-size: 1.2em;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F66;
}
/*======END NAV STYLES======*/
</style>
</head>
<body id="home">
<div id="content">
<div id="tipsHeader"><h1><span>Header text</span></h1></div>
<div id="bigProdDisplay"><img src="images/BigSmall.jpg" alt="" /></div>
<div id="productSlogan"><h3><span>mighty slogan hides behind image</span></h3></div>
<div id="navcontainer">
<ul id="navlist">
<li id="navlist-home"><a href="#">HOME</a></li>
<li id="navlist-advantages"><a href="#">ADVANTAGES</a></li>
<li id="navlist-application"><a href="#">APPLICATION</a></li>
<li id="navlist-conventions"><a href="#">CONVENTIONS</a></li>
<li id="navlist-contact"><a href="#">CONTACT US</a></li>
<li id="navlist-references"><a href="#">REFERENCES</a></li>
</ul>
</div>
</div>
</body>
</html>
Hello, I'm having a slight issue with what I belive to be margins. In IE half the logo is being cut off and in firefox I have a grey area above the menu bar that shouldn't be there. I have checked both my css and xhtml both validated fine with out any warnings. I'm pretty new to CSS and this is starting to annoy me =\. **WARNING** The site is political in nature. Links to the code: h**p://www [.] dncreform [.] com / t / css / main.css h**p://www [.] dncreform [.] com / t / Thank You, William on this page the image on the left that reads "Grade" is 10px from the side (where it should be) in IE... but in firefox, it isnt 10px from the side... but rather 0px... when i change the margin-right to 20px instead of 10px, it looks fine in Firefox, but 10px too far over in IE. any help would be GREAT thanks I want to implement margin notes with CSS. I want small notes in the margin which are vertically aligned with the lines in the main content box. The problem is when the notes are longer or there are many of them - THEY OVERLAP! [or at least i did not find any solution so they do not]. If the note is long [compared to the content] i would like something like that: Code:
very long | See NOTE in the margin, for this short line.
margin note |
is here and |
it should be |
rendered ok |
|
second note | Here it continues, so there is a plenty of
in margin | empty space above this paragraph - this is
| because we do not want margin notes to overlap.
I have been trying to find a solution myself and google the net, but unsuccesfully. There is a page about the problem at URL where you can find what i mean. Nevertheless at the bottom of the page they just say that the notes may overlap and give no solution to the problem. Unitl now i have tried tricks with float [but IE does not support clear: very well], with negative margins, and with display:table-xxx. The latest one is a solution to some extend, but you must enclose your text in several divs to let it work. I would like the solution with clean html code, so ideally one could do something like: Code: <p> <div class="note">here is the text of the note</div>See NOTE in the margin, for this short line. </p> or maybe [dt for notes, dd for text - looks strange, but quite ok for my pages] Code: <dl class="text_with_notes"> <dt>here is the text of the note</dt> <dd>See NOTE in the margin, for this short line. </dd> .... </dl> I would prefer clean CSS solution [no tables], but the must is that it works in most browsers [Mozzila, Opera, IE, Netscape>ver4 at least]. Thank you very much for any ideas in advance ... I will test any new idea, I need just a hint. Hope someone can advise me what's going on. I'm trying to make a page which has a div floated to the left of another div, which is absolutely positioned. There is another one floated to the right. I am using relative positioning to accommodate for different browser resolutions. This seems to work perfectly in FF and IE7 but IE6 seems to ignore the negative margin. Funny thing is that while the page is loading it is in the right place momentarily, but then it jumps back to the position it would be in without the negative margin. The page and the CSS all validates fine. <div id="main"> <div id="leftdiv" class="floatleft"> <p class="bold">Do you... </p></div> <div id="rightdiv" class="floatright"> <p class="bold right">Would you </p> </div> </div> #main { position: absolute; height: 70%; width: 70%; left: 5%; top: 100px; overflow: auto; } #leftdiv { position:relative; margin-left: -109px; top: 50%; margin-top: -160px; left: 20%; width: 198px; height: 299px; padding: 10px; } #rightdiv { position:relative; top: 50%; margin-top: -160px; right: 20%; margin-right: -109px; width: 198px; height: 299px; padding: 10px; } .floatleft {float:left;} .floatright {float:right; } |
|||||||