|
CSS - Horizontal Nav Menu Adding Padding On Left Side
I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except:
1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html 2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are : #1 (for the menu) : thinkmarriage.org/catalog/menustyle.css and #2 (for the site) : thinkmarriage.org/catalog/stylesheet.css The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it. (Sorry, the rules won't permit me to place hyperlinks) Similar TutorialsHi. I just have a simple question. I would like to design a web page that has a menu bar at top, a left side bar, and probably a news wire type bar on the right. Something similar to the way the main Dev Shed page is set up. I'm not asking for anyone to explain to me how to do this, I just don't know what I need to look into to do this. Is CSS what I'm looking for? Or is it something else? I've just started to learn PHP and that's the language I'm programming in, so is there some useful way to do this in PHP? Also, any tips about news wires? Thanks in advance for pointing me in the right direction. I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this? A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on. image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image. I really appreciate your help. The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that. #nav, #nav ul { padding: 0; margin: 0; list-style: none; float:left; width:89.091em; list-style:none; line-height:1; background:#b6791e; font:11px Verdana, sans-serif; font-weight:bold; padding:0; margin:0 0 .5em 0; } #nav a { display: block; width: 11.1em; w\idth: 10.1em; color: #FFFFFF; text-decoration: none; padding: 0.75em 0.5em; } #nav a.daddy { } #nav li { float: left; padding: 0; width: 11.1em; position:relative; } #nav li ul { position: absolute; left: -999em; height:auto; width: 14.7em; w\idth: 14.5em; font-weight: bold; margin: 0; padding:0; background:#FFFFFF; color:#769841; border: 0.1em solid #769841; } #nav li ul a:hover{ color:#ffff30; background:#769841; } #nav li ul li a{ color:#769841; } #nav li li { padding-right: 1em; width: 14.5em; w\idth:13.5em; } #nav li:hover ul { left: auto; } #nav li a:hover, nav li.sfhover a:hover{ color:#FFFF30; } #nav li ul li a:hover { color:#FFFF30; } #nav li:hover ul, #nav li.sfhover ul { left: auto; clear:both; } #nav li ul ul { margin: -3.3em 0 0 5em; } #nav li:hover, #nav li.sfhover { background: #769841; } #nav li a:hover, #nav li.sfhover a:hover{ color: #ffff30; } #nav li ul a{ color:#769841; padding:.4em; } I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty. I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line. For the offending code, please see: http://www.forma3.com/stuff/css/top_menu_v1.html http://www.forma3.com/stuff/css/css/right_menu_v1.css Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed. I would like to align left images so that they touch against each other. Here is a capture of my problem. dollhedz.com/test [CODE] <style type="text/css"> body{ background-color:#000033; color:#00cc33; } #wrapper{ background-color:#000000; margin:15px auto 0px; width:700px; height:800px; } #sitenav{ background-image:url(sitegrax/sitenavback.jpg); background-repeat: no-repeat; height:55px; padding-left:213px; border: 0px; margin:0px; text-align:left; } #one{ float:left; text-align:left; align:left; margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" /> </div> <div id="sitenav" > <div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a> <a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a> <a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div> </div> </div> </body> </code> Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image. thank you for your time Hi! I want to have let's say 4 divs of width:25% horizontally side-by-side. Ex: (I'll ry to draw it ) | | | | | | | | | | | | | | | Thank you. Hi all, My first post here as I am struggling a bit with some CSS and i'm not sure where I am going wrong. My brother built a site based on a template, but he needed some help with maintenance and both the html and css code was complete crap. So I have started rebuilding the site from scratch to make it easier to maintain, and am copying a few bits and peices across from the old site to speed up the process. One such peice was the nav menu. As it stands the menu displays properly and the rollovers work etc, however it has some sort of mystery padding to the left hand side that I can't shift. Please can you take a look at the files and let me know where i'm going wrong? www [dot] dubtrippin [dot] com/test.html Cheers, Paul. Hello, 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 Hi, I have this page: 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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {padding: 0; margin: 0; }
html {padding:0; margin:0;}
.leftDiv {
height: 100px;
width: 30px;
background-color: teal;
float: left;
}
.mainDiv {
padding: 5px 0 10px 0px;
width: 200px;
height: 20px;
background-color: blue;
}
.mainPara {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
<div class="leftDiv">
</div>
<div class="mainDiv">
<p class="mainPara">
First Para
</p>
</div>
<div class="mainDiv">
<p class="mainPara">
Second Para
</p>
</div>
</div>
</body>
</html>
And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions? Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent. Any help is appriciated, CJB This might be a newbie question. There is a extra space on the top of the side bar in IE and not in FireFox Probably a browser style issue, however I do not know what to over-write. Example is at the following. holzgreen.com/padding/ Thanks for looking. Ive been using styles for years now but only in a limited fashion - being very aware of some browsers problems with some of the styles but now I want to dive in head first & create full xhtml pages WITHOUT the use of tables (5 years is enough). Anyway Im playing with setting up a layout using only div tags & I was playing with the margin & padding tags. My question is this: Why does a div set to a width of 100% create a side scrollbar in the browser when any right or left margin value is used? I have also seen the exact same problem with padding when applied to the left or right. Shouldnt the margin or padding be inclusive in the 100% width? What I have ended up having to do is nest a div within a div, setting the inner div's margin (or padding) to some amount & then leaving the padding &/or margins on the outer div set to 0. Its kind of starting to remind me of nesting tables. Am I doing something wrong or is this normal. Ive tested this in Firefox, IE, Mozilla & OPera - all with the same results thanks! Hi! I just floated left my navigation menu, and it caused my page title and breadcrumbs to move over to the immediate right of that (because it is also floated left)... Wondering if anyone could tell me the proper way of getting it back to the left side as it was before. Thanks. Drew EDIT: Here's the link, whoops! http://drewclifton.com/healthwise/?page_id=1667 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? It seems that in Firefox, whenever I use the padding-left directive, it actually increases the size of the div by the amount I chose in padding-left. It doesn't do this in IE, all it does is pad the contents in, which is what I want. Is there any way to do this except for creating another div within that one that is padded-left... Thanks in advance... I'm working on a really simple theme. You can see the progress here. this is a table-less theme. trouble that I'm having is that I cannot get the content to center. It is all floated left. Now, I'm intentionally floating the left column to the left, but that's the only thing (and changing that didn't fix the problem either). So I'm hoping one of you css gurus will have some suggestions. (link to style.css file) Thanks in Advance! The default behaviour for an <input type="submit ... /> is to add a certain amount (perhaps some percentage of the length of the text?) of blank of space to the right and left of the text that is displayed within the button. Very ugly for buttons with long labels. Is there any way to control this without hardcoding a width value? 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... http://www.ilumos.co.uk/site/ http://www.ilumos.co.uk/site/style/styleDefault.css As you can see on the left there is a "glowing" blue-white fadey thing going on on the left of the page, but it stops after the header (#header) for no apparent reason. The page renders fine in IE, but in Firefox or any other standards obeying browser it stops there. the CSS for the page border on the left is as follows: #wrap { background: url("../images/ilumosPageFadeLeft.jpg") repeat-y; padding-left: 25px; width: 750px; } (the wrap div contains all of the page's content) How can I make the image extend to the bottom of the page? Thanks I'm trying to adjust the left and right padding in a form submit button (to fake a normal-looking link so I can use the form to pass php variables w/ $_POST instead of $_GET)... I've put the padding-left:0em; everywhere I can think of, can't seem to influence the submit button padding. Does anyone know anything about this one? Tricky... Hello, I have a table with two columns and I want it a certain distance from the left side and right side. The distance on the left is a lot more than the right. I added a margin to it and it pushed it off the screen to cause a horizontal scroll. I tried putting a width on the table, but it wouldn't work for some reason and then tried a negative and positive margin on the right side with no avail. I am stuck. Any ideas on how to negate the pussing of a margin? I have a page with a header, two column, and footer layout. For some reason, IE is adding 5px to the left column of the page. Here is the relevant css code. Code: #container {
width:770px;
margin:0px auto 0px auto;
background:#ffffff;
text-align:left;
}
#header {
position:relative;
width:770px;
height:109px;
background-image:url(images/header.jpg);
background-color:#ffffff;
text-align:center;
}
div#leftcontainer {
float:left;
width:190px;
background-color:#ffffff;
}
div.leftcontent {
width:190px;
background-color:#004994;
padding-left:5px;
padding-right:5px;
}
div#centercontainer {
margin-top:3px;
float:right;
width:570px;
background-color:#ffffff;
padding:0px;
}
div.centercontent {
width:560px;
background-color:#ffffff;
padding-left:5px;
padding-right:5px;
}
#footer {
clear:both;
padding:4px;
width:770px;
font-size:.8em;
font-family:arial, sans-serif, courier;
color:#ffff00;
background-color:#004994;
margin:0px 0px 20px 0px;
}
Now everything goes inside the leftcontent and centercontent classes. It displays perfectly in Firefox but IE is adding 5px on the right side of the leftcontent section which is pushing all the centercontent down. Any ideas what is causing this? I thought I got away from the IE box model bug by using boxes inside boxes. Thanks in advance. |
|||||||