|
CSS - Overlaying Divs And Margin Problems.
The main things I can point out a
Can't seem to get the logo to over lap. Can't seem to get FF to recognize the margins, but somehow IE can. There are other problems but those are the main two. I need to get this: http:// devbum. com/coded/audven/ to look like this: http:// devbum. com/coded/audven/audven.png Any help is greatly appreciated! I know I'm not supposed to post links but there really is no other way to receive help with this problem otherwise. Similar Tutorialshi, i'have only very basic idea of CSS i'm making a site. It has horizontal scrollor using jquery and very large gap between scrollor and content "Welcome to prince electronic". Please someone help me to reduce the space between these two. website is princelondon.com thank you very much... 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 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? 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 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 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>
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? 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 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 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; } Alright, for some reason, my site works fine in IE, but displays wierdly in Firefox and Opera. http://www.gamingfanboy.com Is there anything in my code that could be causing the display problems in Firefox/Opera? Edit: Just in case you were wondering, no, those aren't the final colors. I was just looking for some contrast. Hi all, I have a horizontal navbar using the old favourite ul/li html list with css doing the layout. Problem is that there is a difference of display between firefox and ie7. The li tag css is Code:
li{
background:url('../images/li_bg.gif') repeat-x #ff0000;
display:inline;
padding:0 5px 0 5px;
margin:0 2px 0 0;
}
List html is: Code: <ul> <li><a href="member.php">Home</a></li> <li><a href="profile.php">Profile</a></li> <li><a href="help.php">Help</a></li> <li><a href="logout.php">Logout</a></li> </ul> I reset margin and padding for all other tags in a general css file. The image is a 1px width gradient. Looks fine on ie7 but firefox seems to add an extra 2 or 3 pixels of margin. Used firebug to try and track down the extra but it highlights only the margin and padding I have specified and doesn't give any clues to the additional space. Have seen plenty of navbar tutorials but not with margin between list elements. Any help is much appreciated... I am a bit of a newbie to css, so please bare with me on this. I have a header div that is in a container and I want to place another div called topNav that will align absolutly over the top right of the header div without pushing the header div down. anyone got any suggestions I can't get my css image overlay working for my header. This is what I have: Code:
#header{
background: #000 url("header_tile.gif") repeat-x;
margin: 0px;
padding: 0px;
height: 143px;
font-size: 7pt;
font-weight: bold;
position: relative;
}
#header #mainlogo {
background: #000 url("main_logo.png") no-repeat;
position:absolute;
top:0px;
left:0px;
z-index:5;
}
I can't seem to get it the mainlogo class to display at all. How would I write my div's to get this working. I tried this but it didn't work: Code:
<div id="header">
<div id="mainlogo">
</div>
</div>
Thanks, Laura Hi all, I am looking for information on overlaying a form over a site. You see this technique used for advertisements and the like, generally in flash. Most of what I am finding is suggesting the z-index using div tags, and I am looking to corroborate that. Any information or links to good examples or tutorials would be great. Thanks Caden Howdy I have a website http://sopadvert.com/ which I am trying to modify after I messed up the old website. Now after creating the theme for the wordpress website, I have made some modifications so I can put a texture below the header ( at the beggining the texture was present only above the header ). It looks fine in Opera, FF, Chrome and Safari, but in IE it is a mess. Here is the code I have added: style.css Code:
#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0px;
}
#teste
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 203px;
background-image: url('images/background.png');
background-repeat: vertically;
z-index: -100;
}
#art-page-background-glare
{
position: absolute;
width: 100%;
height: 264px;
left: 0;
top: 0;
}
#art-page-background-glare-image
{
background-image: url('images/Page-BgGlare.png');
background-repeat: no-repeat;
height: 264px;
width: 879px;
margin: 0 auto;
}
header.php Code:
<div id="art-page-background-glare">
<div id="art-page-background-glare-image"></div>
</div>
<div id="art-main">
<div id="teste">
</div>
<div class="art-Sheet">
<div class="art-Sheet-body">
<div class="art-nav">
<ul class="art-menu">
<?php art_menu_items(); ?>
</ul>
</div>
The red thing is what I have added. Can someone help me please? Thank you Hi there! I'm using this code: CSS: Code:
#content {
margin-top: 75px;
width: 597px;
height: auto;
}
#left {
width: 110px;
height: 497px;
margin: 0px;
padding: 0px;
float: left;
}
#right {
width: 485px;
height: 100px;
}
HTML: Code: <div id="content"> <div id="left"> </div> <div id="right"> </div> </div> --------- But the right-div goes under or over the left-div. I've tried clear:both; between the div's, but it didn't help. URL My site lines up fine on Firefox. However, when it loads on IE, my right most part of the page does not align properly. You can see my problem at dicebaseballdotorg. Any ideas or suggestions? |
|||||||