|
CSS - <li> Height/width Issues Firefox Vs Ie
The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example:
Code: <div style="width:100%;height:50px;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> <br /> <div style="width:100px;height:100%;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> and the CSS Code:
div {
border:0;
background-color:#888888;
}
ul {
margin:0;padding:0;
}
ul li {
float:left;
list-style:none;
background-color:#CCCCCC;
height:50px;
width:100px;
}
The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;. This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.) Can anyone provide a fix to get get round this please? Thank you in advance. Similar TutorialsHi guys, I am building a page with CSS and I'm running into some problems with the CSS buttons I'm trying to use. Right now I have a large box along the top of the page and want two rows of buttons inside of it. These text on these buttons will likely be changing on a semi-regular basis. So instead of using gif buttons made in a graphics program, I'm using CSS to create the buttons. Since each row will have multiple buttons, I first used the display:inline; item and it worked fine in IE. In FF however, the buttons lost their height and width. If I also used the float:left; it worked right, but the buttons were not centered. In looking for a solution, I discovered that inline items cannot use the height and width properties. Any ideas on how to get what I'm looking for? I can't post a link, because this is an intranet page, but here is my relevant code... CSS Code: Original - CSS Code /*the main box which will contain the buttons*/ div#Main-buttons { width:96%; margin:2%; margin-top:10px; height:100px; padding-top:10px; background-color:#84C394; border:ridge medium #004500; } /*adjustments for FireFox*/ html>body div#Main-buttons { width:90%; margin:5%; margin-top:10px; height:100px; padding-top:0px; background-color:#84C394; border:ridge medium #004500; } /*class for individual buttons*/ div#buttons { width:100px; height:30px; margin:3px; float:left; background-color:#F7F3B5; border-style:solid; border-width:2px; border-color:#ffffff; line-height:1.6; display:inline; } a.buttonLinks:link {color:#000000; text-decoration:none;} a.buttonLinks:active {color:#000000; text-decoration:none;} a.buttonLinks:visited {color:#000000; text-decoration:none;}
HTML Code: Original - HTML Code <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> Thanks in advance guys! I have a div in my header that contains an image. The height of the image is 82px. For some reason in firefox (and chrome too) if I don't set the div height to 125px it gets cut off. It looks OK in IE6 without the height set, but with it set as needed for firefox it then creates a space in IE. My header file has: Code:
<div id= "logo" ><img src = "images/logo_LWV.gif"></div>
<div id = "topNav">
<div id = "topNavMenu">
<a class = "top" href="index.php">Home</a>
<a class = "top" href="about.php">About Us</a>
<a class = "top" href="join.php">Join</a>
<a class = "top" href="funds.php">Special Funds</a>
<a class = "top" href="contact.php">Contact</a>
</div> <!-- end topNavMenu -->
</div> <!-- end topNav -->
</div> <!-- end topBar -->
<div id = "imagebar"><img src = "images/lwvCorvallis.jpg"></div>
<div id = "greenbar">
<div id = "pagetitle">
<p>Title</p>
</div><!-- end pagetitle -->
</div> <!-- end greebar -->
and the css is: Code: #topbar
{
dispaly:block; width: 800px;
}
#logo
{
float:left;
}
#topNav
{
float:right;
width: 612px;
height: 65px;
background-color:#cc0033;
}
#topNavMenu
{
position:relative; top:40px;
text-align:left;
color: white;
}
#imagebar
{
display:block;
width: 800px; height:125px;
}
#greenbar
{
display:block;
width: 800px; height: 90px;
background: url(images/greenbar.jpg); background-repeat: no-repeat;
z-index: 0;
}
#pagetitle
{
position:relative; left: 200px;top:25px;
width: 600px;
color: white;
z-index: 1;
}
The site is he http://www.lwv.corvallis.or.us/ What's going on? Hi all, I'm trying to create a simple menu with rollover links using CSS, but while it works in IE, it stops as soon as the link text ends in Firefox. Is this because Friefox is ignoring the width and heigh commands in CSS? And is there any way to fix this? If so, how? I've got this working on Firefox Code:
.menu_item {
}
.menu_item a:link{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:active{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:visited{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_0.gif);
background-repeat: no-repeat;
color: #6A7182;
text-decoration: none;
}
.menu_item a:hover{
width: 163px;
height: 21px;
padding-top: 4px;
padding-left: 20px;
background-image: url(menu_rollover_1.gif);
background-repeat: no-repeat;
color: #ED1C2D;
text-decoration: none;
}
Cheers. I'm trying to control the line-height of a list element. I've tried percentage, numbers, and points, without much luck. I'm trying to decrease the vertical spacing between each list element and can successfully do so in Firefox with the line-height property, but when it's viewed in IE, the bottom half of the characters get cut off. Is there a better method to do this in IE? Thanks! Hi Guys, Consider the following box: PHP Code: <div style=border: 1mm black Solid; width: 148mm; height: 98mm;'> </div> 148mm + 1mm + 1mm = width of 150mm 98mm + 1mm + 1mm = width of 100mm Now why does neither firefox or ie manage to get it? Firefox is about 2mm out and ie is about 3mm out? Any ideas or is it some quirk? Charlie Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!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" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Hi, I have a layout to build and I want to make it as accessibile as possible to the user. I therefore want to allow the user to be able to determine the site font sizes while also keeping the layout look as good as possible. The only way I have done this so far is by setting the width and height of other elements (div's mostly) using the em type. Is this ok? Or I am doing this totally wrong? Regards, Sim085 basically i want to span an absolute div 100% height and width to cover the whole browser window.. IE fails at this.. what are some methods used to get around this? Hey all, I need an area of content, defined by a div element. I would like it to have a minimum width of 550px, and a minimum height of 500px. However occasionally not everything will fit inside the box. Occasionally the box will contain a picture or word or flash file that exceeds 550px wide. When this happens, I'd like the box to be able to stretch to become wide enough to fit the big word/picture. Likewise when there is too much text, or a picture that is too long, I'd like the box to become tall enough to contain everything. My first attempt was using min-width and min-height. The height worked great, but since divs are block elements, the width would always be 100% instead of 550px. So I then tried adding "display: inline-block;". This made the width work, but now the text didn't automatically go to the next line when it reached the right of the box; instead, the box just increased in width. So to sum it up, I need something like this to have a width and height of 550/500: <div id="test">This sentence is small</div> But this one to stretch to the size required to contain the long word: <div id="test">adsfasdfasdfadfadfasdfasdfasdfasdfadsfasdfasdfadsfasdfasdfasdfasdfad sfasdfasdfadsfasdfasdfadsfasdfasdfadsfasdfasdfasdf</div> i have never encountered an issue like this... i isolated the code so i can work with it.... here is a link... A LINK problem is... a line of numbers is generated via php... there is no php working on this page... i just took the final resulting code from View Source, and copied it here... anyhow, a list of numbers is generated... i want to set a width, so the numbers will auto flow to another line... but when i set a width, the numbers just go outside the div... i put a 1px dashed border to show where the div is... it shows the correct width in firefox, but the data flows outside of the div... and in IE... the div is just the size of the text, regarless my set width Hi there Has anyone encountered a bug in IE (6) of extra width, when applying css height property to a div? I set the width of div, via margin Code:
div#footer {
margin: 0px 9%;
height: 40px;
}
When height is specified, the width of the footer is 1px bigger on either side, then other elements with same margin, but no height. This does not happen in other (gecko) browsers! Anyone know a solution, (tantek won't be precise enough with %) ?? Hi, I have a page where I want to display some preformatted code inside a bordered box that has a fixed width/height with automatic scrolling. I can do this with a DIV + several css styles. However, when I generate the same file with Perl/CGI, The width/height stops working (at least not on my browser, Mozilla 1.1). Here is the file that works: Code: <html>
<head>
<style>
.textarealike{
overflow: auto;
border: 2px solid #0000FF;
color: #000000;
height: 30;
width: 350;
font-family: "Courier New";
font-size: 10pt;
padding: 5px;
}
</style>
</head>
<body>
<div class="textarealike"><pre>
Some stuff
Some stuff
Some stuff</pre></div>
</body>
</html>
and here is code that doesn't: Code: <!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.textarealike{
overflow: auto;
border: 2px solid #0000FF;
color: #000000;
height: 30;
width: 350;
font-family: "Courier New";
font-size: 10pt;
padding: 5px;
}
</style>
</head>
<body>
<div class="textarealike"><pre>
Some stuff
Some stuff
Some stuff</pre></div>
</body>
</html>
The only difference is the DOCTYPE header generated by the CGI script..... and I have no idea why this is: Can anyone help me out? Thanks, Frank I'm new to css web design and am attempting my first full layout. What I would like to do is have a hanging picture in the upper-righthand corner of the page that overlaps the header and content sections. All is well, until I specify a width or height on the content section. Although it looks fine in Firefox, IE either: a) moves the content section down or b) squishes the content to the side (if <!--<?xml version="1.0" encoding="utf-8"?>--> is in the html) Here's some much-simplified code to illustrate the problem: Code: <!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="images/style_test.css" rel="stylesheet" type="text/css" />
<title>Sandbox</title>
</head>
<style type="text/css">
#header {
background-color: #cccccc;
border: 1px solid #564b47;
}
#content {
background-color: #c6dedf;
border: 1px solid #564b47;
width: 100%;
height: 400px;
}
#hanging {
float: right;
background-color: #ccff99;
border: 1px solid #564b47;
margin: 20px;
padding: 0;
width: 300px;
height: 300px;
clear: right;
}
#footer {
background-color: #cccccc;
border: 1px solid #564b47;
clear: both;
}
</style>
<body>
<div id="hanging"><code>#hanging {<br>
float: right;<br>
background-color: #ccff99;<br>
border: 1px solid #564b47;<br>
margin: 20px;<br>
padding: 0;<br>
width: 300px;<br>
height: 300px;<br>
clear: right;<br>
}</code><p>This SHOULD overlap header & content.</p></div>
<div id="header"><code>#header {<br>
background-color: #cccccc;<br>
border: 1px solid #564b47;<br>
}</code></div>
<div id="content"><code>#content {<br>
background-color: #c6dedf;<br>
border: 1px solid #564b47;<br>
width: 100%; /* hanging doesn't like this */<br>
height: 400px; /* or this in IE*/<br>
}</code></div>
<div id="footer"><code>#footer {<br>
background-color: #cccccc;<br>
border: 1px solid #564b47;<br>
clear: both;
}</code></div>
</body>
</html>
Anyone know a work-around or how to fix this? Thanks! Hey all, I'm playing with an idea to include a 100% width/height log_in iframe to be displayed only if $_SESSION[uid]==''; (user not logged in) utilizing the following in a remote style.css to "show" the home page behind the iframe via opacity of 10%, while the iframe blocks access to it untill user logs in. My problem is that width:100%; height:100%; doesn't work, while pixel width & height does in the following: Code: iframe {
position:absolute;
top: 0px;
left: 0px;
width:800px;/*works*/
height:800px;/*works*/
/*width:100%; doesn't work*/
/*height:100%; doesn't work*/
z-index: 100;
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
}
ok, i know that because span is a inline element width cant be applied to it, and a lot of people suggest DIV my problem is that div wont work, because of its auto-break thing.... it being a block element and all... so, how would i apply a width of something like 100px to the span elements in code like this?... Code: <div class="infocontainer"> <span class="infobox">Publisher: <?php print $publisher; ?></span> <span class="infobox">Developer: <?php print $developer; ?></span> <span class="infobox">System: <?php print $system; ?></span> <span class="infobox">Gen <?php print $genre; ?></span> </div> I'm having trouble getting my dropdown navbar to stretch the width of the parent container. I can get it almost the right width but I have to make the width 107.16px which seems really stupid and wrong to me. But if I change it to 100% the list becomes vertical and all jacked up. Any clues on how to get it to stretch the entire width of the container? link Thanks! edit: I added the follow css to get rid of the white border at the end of the navbar. It looks good in FF but in IE there's a small gap now between the navbar & the side of the container. I'm hoping that there's a better way to do this. Code: #contact_nav a {border:none;} /*Removes right border on end of navbar*/
|
|||||||