|
CSS - Padding/margin Problems - Horizontal Navbar
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... Similar TutorialsHi, 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>
www. cooperworkskilns.com The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it. This isn't working in IE. Lol, its created a rather interesting stairstep effect. Is there a way to make it span evenly across the page without adjusting the width of each <li>? Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line. #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { margin: 0 0 0 0; } #navbar a { float:left; display: block; text-align:center; color: #000; background-color: #FFF; width: 9em; padding: .2em .8em; text-decoration: none; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } #navbar a:hover { background-color: #003366; color: #FFF; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } Arg, I want a simple, yet clean and cool looking navbar. I am using a modified style from oswd.org and it has something like this: (solid line) ------------|Linkone|----|Linktwo|----|Linkthree|---------- like that with boxes around the links. I like it but if I add to many links and then view it with a very small resolution it doesn't look so good. It all splits up onto different lines and there is still only one solid line. I know a good bit about CSS so what do you think I should try? Tabs? Just a plain old simple line of lines that have color and stuff? I'm currently trying to convert my javascript rollover buttons (based out of generic DW code, ewww!) to CSS/Unordered List based nav. Here's the original site design template: http://www.ipfwcommunicator.org/story.php?id=16 If you look at the top, you can see that there is are a series of bitmaps that get switched with alternates on rollover. That is what I'm trying to reproduce he http://www.ipfwcommunicator.org/story_dnav.php?id=16 In this second template, the same page (essentially) is drawn via CSS and an unordered list. The inspiration for this comes from a list apart. Here are the things I'm struggling with: 1. MSIE5 (Mac) and possibly windows versions, are drawing each "button" list-item as the full width of the screen. They should be the width of the text + the 14px padding on right/left. 2. Vertical centering. I know this is a touchy issue with CSS... not really possible, I've heard from some. Regardless, if anyone has any ideas, I would like the text to appear vertically centered in the navbar area. The full CSS is viewable he http://www.ipfwcommunicator.org/css/style.css The area of interest is #navbar (the div that blocks out a 23px tall bar across the entire viewport) and #menu and it's subitems (the IDs that describe the function of the list) Note this list is intended to be dynamic. Once the PHP is written, these line items will appear dynamically depending on whether each issue has the given section (some issues may not have a "features" link, and thus it will not appear). However, for design continuity, I would like the nav bar to extend across the entire width of the viewport regardless. Any help would be greatly appreciated. This project was essentially done and then the client changed the whitepaper last minute. Thanks! Ok I guess this is a pretty tough for someone who knows layout using tables very well, but is pretty much clueless doing layout with css. I have a graphic header that needs to have a width of 100% and a height 90px.. It is made from an image that is split into 3 sections. The left slice is the logo fixed width 204px. The middle slice is really just background: #10301B and the right side is 185px. So far I have this and it seems to work ok... CSS: #headcontainer { position:absolute; width: 100%; height: 90px; background-color: #10301B; margin: 0; padding: 0; top: 0px; } #headleft { float: left; position:absolute; width: 204px; left: 0px; } #headright { position:absolute; width: 185px; right: 0px; float: right; margin: 0; } HTML <div id="headcontainer"> <div id="headleft"><img src="header_left.jpg"> </div> <div id="headright"><img src="header_right.jpg"> </div> </div> The problem for me now is that I want a horizontal navbar that resizes like the header above it and I dont know how to do this lol.... lets call the source image navbar.jpg and it is 29px in height. Where do I go from here?? If I call what I have (the resizable header) row 1... then the navbar is row 2... and I dont know how to start row 2 . Ive attached a jpeg of what the layout needs to look like. thanks in advance....any help is greatly aprreciated !! Hi guys I'm having trouble trying to convert a CSS navbar, which renders vertically, into an horizontal navbar. Look, here is the HTML Code, and following, the CSS code Code: <div id="menutoolbar">
<ul>
<li><a href="link1.html">Opcion1</a></li>
<li><a href="link2.html">Opcion2</a></li>
<li><a href="link3.html">Opcion3</a></li>
</ul>
</div>
The CSS Code Code: div#menutoolbar {
height: auto;
width: auto;
}
div#menutoolbar li {
height: 21px;
width: 32px;
margin: 0px;
font-family: Tahoma;
font-size: small;
text-align: center;
line-height: 65px;
list-style-type: none;
background-image: url(http://alf.openu.ac.il/www_eng/icon/button.gif);
background-position: center top;
background-repeat: no-repeat;
}
div#menutoolbar li a {
font-weight: bold;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
div#menutoolbar li a:link {
color: blue:
}
div#menutoolbar li a:visited {
color: #900;
}
div#menutoolbar li a:hover {
font-weight: bold;
color: red;
}
div#menutoolbar li a:active {
color: black;
}
Does any1 know which code I have to modify to transform this vertical toolbar into horizontal ? Or maybe to point me to an easy example for doing an horizontal set of css buttons like this example... Thanks... new to the world of css and now working on a shell for a website I'm doing. here is the css PHP Code: html, body{ margin:0; padding:0; } h1, h2, h3, h4, h5, h6 { color: #bf9060; } img { padding-bottom: 2px; } #pagewidth{ width:100%; min-width: 500px; } #header{ height:88px; width:100%; background:#ccae8f; background-image: url("/images/pillowback3.jpg"); background-repeat: repeat-x; } #navcontainer { margin: 0; padding: 0; height: 25px; width: 100%; } #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; } #navcontainer ul li a { background: #ffffff; width: 125px; height: 18px; border: 1px solid #ccae8f; padding: 0; margin: 0; color: #000000; text-decoration: none; display: block; text-align: center; font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; } #navcontainer ul li a:hover { color: #ffffff; background: #806c59; } #navcontainer a:active { background: #806c59; color: #ffffff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } and the list PHP Code: <div id="navcontainer"> <ul id="navlist"> <li><a href="/pillows.php" title="Everything you need for your pillow needs">Home</a></li> <li><a href="/build/index.php" title="Start here for the Best Pillows the net has to offer">Build</a></li> <li><a href="/samples/index.php" title="Pick up to 8 samples ">Samples</a></li> <li><a href="/products/index.php" title="See our full line of Products">Products</a></li> <li><a href="/about/index.php" title="Meet our staff. How PillowWorks works.">About</a></li> <li><a href="/contact/index.php" title="Contact us for any reason">Contact</a></li> </ul> </div> as you can see i'm using px to style the size of the elements, but that isn't very liquid Hello, Can anyone explain me why the texts in the following example are not in the same (relative) position? It looks like that in the first container, the margin is actually more than I specified (10px)... I don't get it... :S Thanks, diodorus 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>
<title>Title</title>
<style type="text/css">
#container{
margin: 0px;
padding: 0px;
width: 1000px;
background: #ccc;
}
.block {
background: #0ff;
float: left;
height: 100%;
margin: 10px;
text-align: left;
width: 230px;
}
.block2 {
background: #0ff;
float: left;
height: 100%;
padding: 10px;
text-align: left;
width: 230px;
}
</style>
</head>
<body>
<p>First:<p>
<div id="container">
<div class="block">aaa</div>
<div class="block">bbb</div>
<div class="block">ccc</div>
<div class="block">ddd</div>
</div>
<p>Second:<p>
<div id="container">
<div class="block2">aaa</div>
<div class="block2">bbb</div>
<div class="block2">ccc</div>
<div class="block2">ddd</div>
</div>
</body>
</html>
I've run into this problem a few times. The padding attribute has spottty support in IE. Same with margin. Has anyone found a workaround? For example, I would like paragraphs and bullet points to have extra space above them. In the past, I've set a style using padding-top to specify this space. However, in IE it yields some bad results. Similarly, I've got some text links which I would like to bump over to the right a few pixels. Padding or margin would sure come in handy. Any other ways to achieve the same result? Hi! Is it a good idea to always use padding and never margin (span, divs, etc.)? or would a combination between margin and padding be better? P.S. In some places I must use padding... in the others I use margin but could use padding instead... wouldn't it be more consistent to always use padding? Thank you Okay, So here is the situation and it has had me stumped for 2 days. I have a site that was displaying perfectly on my local server - I have xampp installed to test site locally. I have a site that is displaying perfectly in Opera, Google Chrome, Safari and Firefox....and locally on IE8. Now here is the kicker. Once I upload it to my server online the layout is thrown out of whack in IE. Why would there be a difference between a local view and an online view in IE? Hello, I always use EM for text size, letter spacing and line heights. For DIV widths I usually use PIXELS if fixed width web site and PERCENT if fluid layout web site. I think in both cases I am doing the right thing ... I think. But what unit should I use for padding and margin? EM? PIXEL? Thanks, Miguel 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, I have this attributes left:504px; to align my picture but margin:0 0 0 387px; can be use as well. Whats the best thing to use? Remove. Hi, i try to print some variables on a ticket. A ticket which is already printed. I try to reach a result like this: This is the html: PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Printing Ticket...</TITLE> <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css"> <link rel="stylesheet" type="text/css" media="screen" href="foo.css"> </HEAD> <BODY> <div id="menu" class="menu"><center><p><br>The ticket will be printed...<p> <input type=button value="Close Window" onClick="javascript:window.close();"> </p></p></center></div> <div id="content" class="content">C 25 3 12345</div> </BODY> </HTML> The foo.css: PHP Code: @media print { body { background: white; font-size: 12pt; FONT-FAMILY: Verdana; background: transparent none; } #menu { display: none; } #content { margin-left: 30px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; text-align: left; } } @media screen { body { font-size: 14px; line-height: 1.2 } #content { display: none; } } This piece of the div tag 'content' don't listen to me: PHP Code: margin-left: 30px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; I have most of them at 0px, but whatever i insert into there it doesn't change the position of the variables. Are there are other codes to define a position? Thanks for any help. I've got a best practices question. Traditionally I put the following code at the top of all my css files to make browser compatibility easier. Code: *{margin:0; padding:0; border:0}
It works great and I've never questioned it till now. I'm working on creating a "sub-site" that's part of a much larger and already defined site. They don't do my little trick above, which means I can't do it to guarantee compatibility (I can't break their styles). So, I'm left with going through and setting margins and paddings to 0 on individual elements. The only other idea I had was to give a blanket margin:inherit to all elements below a certain div, but that clearly doesn't work as then I've got inherited margins that I don't want. My questions a 1. Is the above trick (setting all margins and paddings to 0 and then overriding later) a good one? What's the current best practice thoughts on this? 2. Anyone have a good workaround for my current problem other than just setting the margin and padding in each and every element? thanks. First time poster here - bear with me! I've used the CSS Validation link, and have come to find the developer of the theme I'm using has some sloppy code that needs cleaning up, although I'm not so certain that's the cause of my dilemma. Let's get some basics out of the way: My current theme is supplied for WordPress (Yes, I'm using WordPress too) My current browser is Google Chrome (I experience the issue in Firefox and IE as well) I've tried requesting help on the WP forums, but they redirect posters to third-parties for assistance with what they label "fundamental formatting". I've tried several Google searches to no avail (not sure my current theme title is actually the problem) To be more specific, I seem to be having issues with excess margin/padding on my theme, and haven't a clue how to remove it. When uploading a background image, the right side of the image seems to "crinkle" and looks absolutely hideous. When I change the background color of theme (via theme settings in the WP dashboard), I can see a substantial amount of space on the right side of the screen, which appears to be an issue with excess margin or padding (not sure which, if either). I've performed at least a dozen searches, and haven't been able to find a solution to the problem, let alone someone with the same issue. I should also mention I'm using a widescreen 1980x1080 resolution, however the problem persists even with a different resolution. Expanding the background image only worsens the "crinkling" and shrinking it just looks plain silly. Adjusting the background color of the site seems to help with the odd margin/padding, (rendering it invisible by giving it the same exact color as the image) - but this still leaves me unable to customize my background image further, only being able to have graphics or additional imagery on the left side. I'm not exactly the most "advanced" user of CSS. I have limited knowledge, but can typically troubleshoot the most basic issues (centering text, adjusting positioning of content, etc). If this post doesn't provide enough information, by all means, say so! You can have a look-see at my site -> ImperiumUO [dot] com. I appreciate any and all effort this community may provide in getting this annoying issue resolved. 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 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}
|
|||||||