|
CSS - Ul Element Padding Issue - Ff & Ie
On the sidebar of this page http://www.laurieannre.com/real-estate-agent.asp the UL titled Neighborhoods has a different padding on FF than in IE and I can not understand why?
Similar TutorialsHello, Is there a way to have padding (say 15px) all around a cell, but allow for expections, like having one div element float:left and align far left against cell border while everything else is inset 15px. ie. Code:
<style>
#menubox {
float:left;
margin-left:15px;
margin-bottom:7px;
}
.main_cell {
padding:15px;
}
</style>
<body>
<table width=600 border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top class="main_cell"><div id="menubox">table with menu items taht is achored far left against cell wall</div>
Some text that wraps around "menubox" but needs to be padded around cell walls.</td>
</tr>
</table>
</body>
Thanks, Rey Pleae look at this page in IE8 & Firefox - Click Here It appears as I want it in FF but in IE there is a gap between the paragraph in the center column and the first listing of product. I have tried to put margins on all elements but can not get that closed in IE. Can someone shed some light? Thanks. Tom just read a post on ALA regarding how to create a simple thumbnail gallery using CSS. while the styling of the CSS provided on ALA seems to render the same on both FF and IE, the original code renders slightly different. everything seems to work fine except for the padding around the caption, underneath the image. there is more space around then caption when viewed in IE. please look at this link where the html file and css are hosted - (view source) can you make out anything that could be adjusted to fix this tiny bug? really appreciate if you could help out a little here. been at this for the last couple of days, and now really dead with any ideas to fix this tiny issue :-/ thanx for your time, z Hi all, My CSS for a <DIV> is: Code:
.title {
width: 350px;
background: #aaccff;
padding: 0px 0px 0px 10px;
border: 1px #cccccc solid;
}
When I enter text in the DIV, it shows a bit to the right of the left border, which is what padding property is supposed to do! The problem is, in Internet Explorer, this "shift" is PERFECT and there is no extension beyond the right border, but in Firefox, the background color can be seen extended 10px to the right border. I searched on internet and people called it a problem with I.E. Everywhere I visited, people seemed to curse a Microsoft product and give a line of code, "DOCTYPE" etc to force I.E. to change mode and behave like Firefox. Those guys dont understand that what the coder wants is a solution so that Firefox shows the DIV exactly like I.E. 1) So please! Stop cursing I.E. and give solution as to how to modify the code...! 2) A person said that the width is calculated as: width + padding + margin. In my case, since margin is "0", the suggession seemed to use the following code: Code:
.title {
width: 340px;
background: #aaccff;
padding: 0px 0px 0px 10px;
border: 1px #cccccc solid;
}
i.e., subtracting the padding-left from width. But that makes "no sense" because if we do the above, it should do nothing but to just change the width of the DIV, and so the end result would be that in Firefox, instead of spanning to 360 px horizontally, this would cause it to span in 350px horizontally. Keeping in view that its the "only" DIV on the page, setting the width parameter should not be a problem. 3) Now, if Firefox follows standard, then how will firefox ever show the padding property correctly if the above scenario is considered...! 4) Microsoft may not follow the standards sometimes, but the result "is" userfriendly most of the times...! Thanks! Hi, Im trying to make a simple bar with text in the center. Im having a lot of problems with it however, because its height is 50px not 25px. The bars in question are the ones that say "Description, Payment" etc I started by setting its height to 25px in the CSS but this didnt work. Ive tried adding padding: 0px to what I thought was the relevant tag, but this doesnt change it either! This is the address to the test page: http://www.zombiemod.com/test.html This is the code: 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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<style type="text/css">
/*<![CDATA[*/
#title {
border-top:2px #000000 solid;
border-bottom:3px #000000 solid;
}
#mainNav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
float: right;
height: 61px;
}
#mainNav li {
float: left;
margin-top: 38px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}
#mainNav li a {
margin: 0px;
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight: normal;
color: #efeeee;
font-family: Verdana;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainNav li a:hover {
font-weight: bold;
color: #efeeee;
}
#mainNav li a span {
background-attachment: scroll;
background-image: url(http://img12.imageshack.us/img12/3157/tabs2d.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px;
}
#horinav li {
float:left;
width:23%;
text-align:center;
}
p.c13 {text-align: left}
span.c12 {color: #efeeee}
h3.c11 {color: #000000; font-family: Verdana; text-align: center}
div.c10 {text-align: left}
table.c9 {border-collapse: collapse}
span.c8 {font-family: Verdana; font-size: 80%}
p.c7 {font-family: Verdana; font-size: 80%}
span.c6 {color: #000000; font-family: Verdana; font-size: 14}
p.c5 {text-align: center}
span.c4 {font-family: Arial, Helvetica, sans-serif; font-size: 200%}
tr.c3 {background-image: url(http://img6.imageshack.us/img6/3518/63387888.jpg)}
tr.c14 {background-image: url(http://img6.imageshack.us/img6/2466/bgthin.jpg)}
span.c2 {font-family: Arial, Helvetica, sans-serif; font-size: 120%}
span.c1 {color: #232323}
</style>
<style type="text/css">
/*<![CDATA[*/
img.c7 {padding: 5px; border: 1px solid #ffcc00;}
tr.c6 {background-color: #000033}
td.c5 {background-color: #FFFFFF}
tr.c4 {background-color: #FFFFFF}
li.c3 {list-style: none}
tr.c2 {background-color: #FFEDA3}
span.c1 {color: #EFEEEE}
/*]]>*/
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" id="title">
<tr class="c3">
<td align="left"><span class="c2"><strong><span class="c1"><a name="top" id="top"><img src="http://img200.imageshack.us/img200/9856/alienware.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></span></strong></span>
<ul id="mainNav">
<li><a href="#Description"><span>Item</span></a></li>
<li><a href="#Payment"><span>Payment</span></a></li>
<li><a href="#Shipping"><span>Shipping</span></a></li>
<li><a href="#Policies"><span>Pictures</span></a></li>
</ul>
</td>
</tr>
</table>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr class="c4" valign="top">
<td align="center">
<div class="c10">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="c9">
<tr class="c14 c2">
<td width="100%" colspan="3">
<p class="c5"><strong><span class="c6"><a name="Description" id="Description"><span class="c1">Description</span></a></span></strong></p>
</td>
</tr>
<tr>
<td width="49%" align="left" valign="top">
<p class="c7"><br />
Test.</p>
</td>
<td width="2%" align="right" valign="top"></td>
<td valign="top" width="49%">
<ul>
<li class="c3"><br /></li>
<li><span class="c8">Test</span></li>
<li class="c3"><br /></li>
</ul>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Payment" id="Payment"><span class="c1">Payment</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="2"><br />
<br />
<span class="c8">Test.<br /></span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Shipping" id="Shipping"><span class="c12">Shipping</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20"><br />
<br />
<span class="c8">Put your Shipping information here.<br />
There are <br> tags here to fill the cell, take them out after inserting you text.</span><br />
<br />
<br /></td>
</tr>
<tr class="c14 c2">
<td>
<p class="c5"><strong><span class="c6"><a name="Policies" id="Policies"><span class="c12">Pictures</span></a></span></strong></p>
</td>
</tr>
<tr class="c6">
<td class="c5" height="20">
<p class="c13"><br />
<br />
<span class="c8"><br /></span></p>
<ul id="horinav">
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
<li><span class="c8"><img class="c7" src="http://img528.imageshack.us/img528/4149/100nw3.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></span></li>
</ul>
<br /></td>
</tr>
</table>
</body>
</html>
Ive put it through a validator, now it validates, but it still doesnt work. I believe the tag in question is c14 and c2. Remove. Please look at the main navigation on this site www.downtowntransmission.com I have it exactly how I want it in IE7 but it is a bit off in FF. Mouseover the Contact link and Gallery Link and you will see what I mean. Is there some small adjustment I can make to make it look the same in both? As a side note, do you like the site? T I'm building a series of navigation links in boxes on top of each other. I want to pad the links inside their div tags 3 pixels all the way around. I'm seperating the boxes using the border property, 1px solid on the bottom of each cell. The top and the bottom are handled in a seperate class. In firefox, the brower adds the 3 pixels to the overall width (maybe six since I'm padding left/right) so the page comes out like this: --------- | Link 1 | ------------- | Link 2 | ------------- | Link 3 | ------------- Now in IE, it looks correctly. I'm not sure which one is correct, but since IE looks right I assume it's correct. Any way to get the padding to be handled consistently in 2 browsers? Hi all, I've been reading this forum for a while now, but never had to post anything before. I've hit a snag whilst working on my new personal site. Its all fine in Firefox, I'm using a Wordpress engine to spit out 'posts' which are actually folio items, however IE, after the first one, the second one and every one after that have some extreme margin/padding issue so that the content area is only maybe 20px wide. www dot lucas-starbuck dot com forwardslash design is the site address, any ideas would be much appreciated! Thanks, Lucas Hi there, I am in the process of making a website to purchase tickets for Cannon and Ball's show in Morecambe, and I've tried to make it as standards compliant and usable as possible. I've made a nav bar using a UL tag. This works fine in opera and mozilla, but the hover effect doesn't kick in in IE until you are actually on the text. I've tried using the IE7 patch and that helps none. Can anyone tell me what I'm doing wrong? The site is: http://cannonandball.1stmorecambe.net/ Style sheet: http://cannonandball.1stmorecambe.net/style.css Take a look at http://actrucking.com/. I just added the orange link towards the middle of the page that says "Get a FREE Online Quote Now!!" I'd like to push it down a bit so it is more centered in the blue area, but I can't seem to get the text to acknowledge margin or padding? Here are what the styles look like: Code: #tlCallBox { background:#336799; height:75px; display:block; float:left; width:868px; margin-left:10px; position:relative; margin-bottom:30px}
#tlCallBox h2{ color:white; font-size:19px; margin: 15px 0 0 30px}
#tlCallBox p { color:White; margin-left:32px}
#tlCallBox b { margin:20px 0 0 120px; font-weight:bold; font-size:20pt}
Hello, I am having an alignment issue that I can't seem to fix. The site is accessed he http://cbo4edu.org/newSite/index.html I've used 2 different CSS files... one for the homepage and one for all the other pages . For the homepage, I want the Mission headline to just touch the blue border from the navigation. Right now when viewed in Firefox on my Mac there is an extra white box above it with nothing in it... but in IE it looks fine. How do I get it to look the same in both browsers? For the other pages, I'm having a similar issue. I want about the same amount of white space above the main headings without the words getting cut off. How can I fix this in both browsers? Thank you in advance. I have a menu structure that I am trying to create with CSS. The features I want are the following:
Variable width elements
Resizable text from user
Image at left of link
I have an example page up he URL I've got it working with a table, but when I've tried with a unordered list, I start having problems. Here's what is happenning: Firefox -- when I put padding on my anchor tags, the anchor elements expand outside of the list item elements. Firefox -- anchor elements don't expand to the full width of the list item element. Internet Explorer -- IE seems to only allow for fixed/percentage with list item elements. Is there a way to allow for variable width elements? Thanks for the help! -- Doug Hey, In the top menu For some reason I can't seem to pick (after frying my brain working on this for the past however many hours) why there is such a huge empty space above the menu. I'm sure it's something simple I just keep missing. Also having trouble positioning the other menu without bloating up the css with potentially useless code. (-px, etc). Website style.css menu2.css (says menu two, but is just the second attempt at css for the first menu) Cheers for all help! I have a table inside of a div, and I need to push the table down a little bit but can't get it to without using line breaks, which push it down too far. I have a background image that I'm using to emulate a shadow and need the table to just be a little bit lower so that the upper right hand corner image blends in with it. Here is my CSS: Code:
#header {
width: 100%;
height: 90px;
padding-bottom:5px;
padding-right: 10px;
margin-bottom: 5px;
vertical-align: bottom;
background: url(img/hd_shw.gif) no-repeat right;
}
.top {
width: 16px;
height: 16px;
vertical-align: top;
}
.bottom {
height: 16px;
width: 16px;
vertical-align: bottom;
}
.blue_fill{
background-color: #4095BF;
}
My HTML: Code:
<div id="header">
<table class="hdr_bk" align="center" width="100%" style="height: 92%;" cellpadding="0" cellspacing="0">
<tr>
<td class="top" style="background: url(img/b_tl.jpg) no-repeat top left #4095BF;"></td>
<td class="blue_fill"></td>
<td class="top" style="background: url(img/b_tr.gif) no-repeat top right;"></td>
</tr>
<tr class="blue_fill">
<td></td>
<td>Header</td>
<td></td>
</tr>
<tr>
<td class="bottom" style="background: url(img/b_bl.jpg) no-repeat bottom left #4095BF;"></td>
<td class="blue_fill"></td>
<td class="bottom" style="background: url(img/b_br.jpg) no-repeat bottom right #4095BF;"></td>
</tr>
</table>
</div>
I realize that there is a gap, which will be fixed when I figure out how to push down the table. Please look at this page - http://www.soarminden.com/glider-soaring-gallery.asp I put a red border on parent element. The children divs appear outside the parent at page bottom? Can someone shed some light please? I think the issue is with the styling of the div(s) innerLeftColumn or LeftColumn Code: <div style='width:670px;margin:0;border:1px solid red;min-height:500px;position:relative;'> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/1/tom6.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=1' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Tom Hall Soaring</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/12/phil-jones2.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=12' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Phil Jones Goes Gold & Diamond!</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/13/wedding1.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=13' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Wolfram and Lydia's Wedding</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;clear:left;'> <img src='images/gallery/15/DSC_6547.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=15' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Brennan Hall Soaring Lake Tahoe</a></h4> </div> <div style='width:175px;height:150px;float:left;margin:20px 0 20px 10px;'> <img src='images/gallery/16/teresa.jpg' style='width:175px;height:150px;margin-bottom:3px;'/><br /> <h4 style='text-align:center;font-size:12px;margin:0;padding-bottom:10px'><a href='glider-soaring-gallery2.asp?subject=16' style='color:#00f;line-height:1;text-decoration:undeline !important;'>Teresa Luther</a></h4> </div> </div> I'm having trouble getting two textual elements to align oppositely, one left one right, within a DIV. Visually, I am attempting this: PHP Code: ================================================================= User: John Doe Main Menu :: Logout ================================================================= To accomplish this in all browsers as compliantly as possible, I attempted to define the outer div in CSS, align the content left in the XHTML, and then float another DIV inside to the right to hold the right-aligned textual content. I know that since <DIVs> are considered block level items, they are preceeded and followed by a linebreak. Thus, I defined the Right-floated DIV as display: inline, hoping to fix that. The CSS: PHP Code: #loginbar { height: 14px; font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; background: #285064; margin: 0; padding: 3px 3px 0px 3px; } #logout { float: right; display: inline; } .loglink { font-size: 7pt; line-height: 7pt; font-weight: bold; color: #ffffff; } And the markup: Code: <div id="loginbar" align="left"> User: '.$_SESSION['fullname'].' <div id="logout" align="right"> <a class="loglink" href="main.php">Main Menu</a> :: <a class="loglink" href="logout.php">Logout</a> </div></div> This system works nicely in every browser I've tried (IE6 Win, IE5.1 Mac, Opera 7.54, Camino, Safari, and NN7.2) EXCEPT Firefox. Firefox continues to put the linebreak in before the logout, dropping the text halfway below the bottom of the div even when the div is defined as display:inline. (Interesting enough, the other so-called compliant browsers don'tput in the linebreak before the div even when it's not defined inline.) Anyone have a more elegant solution to this? I'm pretty sure I'm doing it the hard way now and can't see the forest from the trees at this point I can't figure out why the ul with the id #two is not responding to my position attempt. It is child of an li in the ul w/ a class .menu on www.eagletransmission.net If you mouse over Gallery the dropdown should be flush with the left side of the parent li but it is not. Aaaaargh Tom I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>??? Here is a link http://casadelmar.tmhdesign.com Thanks. Hey everyone, I am making a design to kill some time, and I have come across a problem. I have a menu at the top which has no top padding unless I give it padding of 87px. I find this very odd, and it happens in every browser( Firefox 2.0.0.3, Opera 9, IE6-7 ); is it a bug in CSS itself or am I doing something wrong? Here is my code, maybe I am missing something. html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { background-color: #082567; color: #FFFFFF; margin: 0; padding: 0; font-family: verdana,tahoma,"Bitstream Vera Sans",arial,helvetica,sans-serif; font-size: 12px; text-align: justify; } #top-menu { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; height: 130px; } #top-menu h1 { float: left; font-weight: bold; letter-spacing: -3px; font-size: 31px; padding: 5px; } #menu { float: right; list-style-type: none; text-align: center; } #menu li { display: inline; } #menu a { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=082567&EndColor=0C39A1&Format=jpeg ); background-repeat: repeat-x; color: #FFFFFF; padding: 50px; } #menu a:hover { background-image: url( http://secretgeek.net/Gradient.aspx?Direction=H&Length=130&StartColor=0C39A1&EndColor=082567&Format=jpeg ); background-repeat: repeat-x; } </style> </head> <body> <div id="top-menu"> <h1>ryon.hunter</h1> <div id="menu"> <ul> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> <li><a href="">asdf</a></li> </ul> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I validated it and it validates fine, any suggestions? |
|||||||