|
CSS - Divs Display Improperly In Ie6, Ie7
As usual, my designs work best in Firefox, but this time it's to an annoying degree, because the menu on this page shows on the left underneath the shrimp logo, but in both IE 6 and IE 7 it's between the two header divs. Oh, and in IE 6 the header background colour doesn't show up. I know the PNG doesn't work, too, but I can fix that with Javascript later on, it's not too crucial.
Would anyone please help me with this? Here's the code: style.css Code: body {
background-image: url('images/background.png');
background-color: #FFFFFF;
font-family: Gill Sans MT, sans-serif;
font-size: 16px;
}
h1 {
font-size: 110%;
}
h3 {
font-size: 105%;
margin-left: 4px;
margin-top: -1px;
margin-bottom: -8px;
}
#container {
padding: 5px;
background-color: #CAD1F4;
background-position: top left;
background-repeat: no-repeat;
background-attachment: scroll;
margin: auto auto auto auto;
max-width: 1024px;
min-width: 800px;
border: 1px dashed #000000;
}
#header_left {
background-image: url('images/header_bg.png');
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: #B5BFF2;
float: left;
width: 630px;
height: 180px;
clear: right;
}
#header_right {
float: right;
padding-top: 20px;
padding-bottom: 20px;
width: 160px;
height: 140px;
}
#navigation {
float: left;
clear: left;
width: 130px;
border: 4px double #000000;
margin-top: 3px;
}
#li_home {
list-style-image: url('images/home_icon.gif');
}
#li_about {
list-style-image: url('images/about_icon.gif');
}
#li_cast {
list-style-image: url('images/cast_icon.gif');
}
#li_blog {
list-style-image: url('images/blog_icon.gif');
}
#li_gigs {
list-style-image: url('images/gigs_icon.gif');
}
#li_photo {
list-style-image: url('images/photo_icon.gif');
}
#li_contact {
list-style-image: url('images/contact_icon.gif');
}
#li_feedback {
list-style-image: url('images/feedback_icon.gif');
}
#main {
float: right;
width: 83.75%;
}
#footer {
padding: 20px;
clear: both;
}
#footer p {
text-align: center;
font-size: 70%;
}
#footer a:link, a:visited, a:active {
color: #000000;
text-decoration: underline;
}
.noborderimg {
border: 0px;
}
index.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>SHRIMPS - Sheffield University Improv Society</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="STYLESHEET" type="TEXT/CSS" />
<script type="text/javascript" src="http://www.makepovertyhistory.org/whiteband_small_right.js"> </script>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header_left"><img src="images/logo_color.png" class="noborderimg" alt="Shrimpage the Shrimp!" /><img src="images/shrimps_header.png" alt="SHRIMPS - Sheffield University Improv Society" /></div>
<div id="header_right"><a href="http://www.shef.ac.uk"><img src="images/sheffield_uni_button_160x40.png" class="noborderimg" alt="The University of Sheffield" /></a><br /><a href="http://www.sheffieldunion.co.uk"><img src="images/sheffield_union_button_160x40.png" class="noborderimg" alt="Sheffield Union" /></a></div>
<div id="navigation">
<h3>Navigation</h3>
<ul>
<li id="li_home">Home</li>
<li id="li_about">About Us</li>
<li id="li_cast">Cast</li>
<li id="li_blog">Blog</li>
<li id="li_gigs">Gigs</li>
<li id="li_photos">Photos</li>
<li id="li_contact">Contact</li>
<li id="li_feedback">Feedback</li>
</ul>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer"><p>This interweb site was designed by resident geek <a href="http://www.danielhough.co.uk">Daniel Hough</a>, and the "Shrimpage the Shrimp" logo (top left) was created by the very talented <a href="http://katebert.deviantart.com">Kate Wiles</a>.</p></div>
</div>
</body>
</html>
Thanks, I'd appreciate any help at all. Similar TutorialsThis problem is only partial to IE and not any other browser (eg. Firefox). What happens is when you click on a menu button to access the submenu, it will not display the submenu directly under the menu button pressed. Also, some submenus have submenus of their own. I have a little triangle that indicates this. The triangles are seen properly in IE, but are seen as question marks (?) in Firefox. I am not sure why though. If anyone could help me figure these problems out I would greatly appreciate it. Thanks. Here is the link: http://www.fired-up.ca Thanks once again. Hello everyone, I am currently trying to find a solution in css that would allow me to alter the design of the following html structu Code: <body> <div id="header"> Website Title Here </div> <!-- header --> <div id="content"> <div id="article"> Article goes in here </div> <!-- article --> <div id="menu"> Menu goes in here </div> <!-- menu --> </div> <!-- content --> </body> What I want to do is keep that structure intact so that when someone visits the page from a text browser or something else that does not support css, the article appears before the menu. But I want the menu to appear before the article when someone has css enabled (not to the left or right of the article, but above it altogether). I tried using the "position: absolute; top: 0; left: 0;" tag on #menu, and while it does move the menu right under the header, it doesn't bump the article under the menu, it leaves them both overlaying each other. The first solution that comes to mind would be to add the same css tags to #article and move it down by the height of the menu, but the problem is that the menu will always vary in height. Is there a way to make the article align itself with the bottom of the menu div without using fixed values? Thanks! Jerome I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES! here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution. Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser. I've validated my code, and just can't figure out what the problem is. (I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.) Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help. Here is the HTML: <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="comp.css" /> </HEAD> <BODY> <div id="parent"> <div id="left_top"> </div> <div class="bigcontainer" id="right_top"> a very<br>special<br>place<br>on the<br>internet </div> <div class="container" id="left_mid"> additional reading </div> <div class="container" id="right_mid"> tab one | tab two | tab three | tab four | tab five </div> <div class="container" id="left_bottom"> first link<br> second link<br> third link<br> fourth link<br> fifth link<br> sixth link<br> seventh link<br> eighth link<br> </div> <div id="right_bottom"> <p> Lorem ipsum dolor sit amet... </p> </div> </div> </BODY> </HTML> Here is the CSS: body { font-family: sans-serif; font-size: 10px; margin: 0; padding: 0; background-color: #e5e5e5; } div.bigcontainer { font-size: 20px; font-weight: bolder; vertical-align: middle; padding: 20px 20px 0px 0px; text-align: right; } div.container { font-size: 12px; font-weight: bolder; vertical-align: middle; padding: 10px 20px 5px 0px; text-align: right; } #parent { margin: 0px; padding: 0px; position:relative; } #left_top { width: 35%; height: 190px; background-color: #7d7d7d; float: left } #right_top { width: 65%; height: 190px; color: #ffcc00; background-color: #666666; float: right; } #left_mid { width: 35%; height: 35px; color: #ffff99; background-color: #ffd426; float: left; } #right_mid { width: 65%; height: 35px; color: #666666; background-color: #ffcc00; float: right; } #left_bottom { width: 35%; height: 100%; padding: 20px; color: #999999; text-align: right; background-color: #e5e5e5; float: left; } #right_bottom { width: 65%; padding: 20px; color: #666666; text-align: right; background-color: #ffffff; float: right; } Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks 1.On amazon.com's home page, they have a search bar with a background image on top of another background image. Is this done with a background div with z index 1 immediately followed by the search bar's background div with z index 2? 2.I'm confused about where divs are to be placed. If you have a form with a table layout, would the div be placed outside the form tag or outside the table tag? Please have a look at http://www.root.lamtha2.co.uk/cssproblem/ why is there a gap between #header and #maincontent in both IE and FF how do I resolve? thanks Right now I'm using a table for showing how many people from each state have signed a petition. It looks sort of like this: Code: <table> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">CA</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=CA">1242</a></td> </tr> <tr> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">TX</a></td> <td align="center"><a class="state" href="./signers.php?search_field=state&state=TX">550</a></td> </tr> <tr> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">FL</a></td> <td bgcolor="#FDFCE5" align="center"><a class="state" href="./signers.php?search_field=state&state=FL">487</a></td> </tr> </table> Should I be using DIVs? Hello I was wondering if any one could help me with a problem with some divs, I would like to create a web page using just css and html which looks like this:- Whay I would like to know is how would I get the divs to keep aliened as in the picture?? Any help would be very appreciated. Any ideas as to why i'm getting these 2 gaps where the white background is clearly visible? It's under the header div and above the footer div, which surrounds my content/container div. There also seems to be a margin or padding around the text in the leftSide and mainText divs, but none around the text in the rightSide div. Hmmm? This problem can be reproduced in FF. http://www.indusmultifoods.com/test/indus.php Any insight would be greatly appreciated. Thanks! Amit p.s. there is no php code as of now, i just have a habit of starting off my webpages with php extensions. Hi there, For some reason, I have a white space appearing above my divs. This is only happening in FF though. I have a header and 2 columns underneath, but the two columns underneath the header have a white gap above them. This is my CSS: Code:
#clear{
clear:both;
}
#wrapper{
width: 780px;
margin: 0 auto;
}
#header_wrapper{
width: 780px;
background-image: url('img/header_bg.jpg');
height: 86px;
}
#logo{
float:left;
margin-left: 20px;
}
#header_right{
float:right;
margin-right: 20px;
margin-top: 60px;
}
#left{
float:left;
width: 580px;
margin-top:0px;
}
#right{
float:right;
background-color: #dddddd;
width: 200px;
}
and this is my HTML Code: <div id="wrapper"> <div id="header_wrapper"> <div id="logo"> <a href="index.html"> <img src="img/logo.jpg" alt="Pitter's Painting" border="0" /> </a> </div> <div id="header_right"> <a href="index.html" class="orange">Home</a><span class="white_small"> | </span><a href="#" class="orange">Contact Us</a> </div> </div> <div id="clear"></div> <div id="left"> sadsad </div> <div id="right"> nav </div> Any ideas what I have wrong? |
|||||||