I am having a small issue with my main menu padding that I'm hoping someone can help me with. In Firefox and IE, everything is rendering fine. However, in Chrome and Safari, the padding is slightly different.
Right now, I have the left/right padding set to 1.82em, which ends up with a little bit of unused space after "Contact Us" in Chrome/Safari. I have also tried setting it to 31px, which ends up rendering perfectly in Firefox/IE, but in Chrome/Safari it places the last menu item on a new line.
I've read that Firefox and Chrome render padding exactly the same, so I'm at a loss on this one. I can probably java my way out of this and use different CSS for different browsers, but I'd rather avoid that. Any ideas?
You've actually got two problems:
1.82em will render differently (the "padding" problem)
text will render differently, giving you a different "base width" for each item (that's why when you used pixels for padding, it didn't work either)
As usual, you have many ways of solving.
One way:
Give all of your LIs classnames or ids and set their widths, kill the left/right padding, and just set text-align:center;
HTML:
<ul class="menu-mainmenu">
<li class="menu-mainmenu-0 current active first">
<a class="current" href="/eme/"><span>Home</span></a>
</li>
<li class="menu-mainmenu-1">
<span>About the Emergicenter</span>
</li>
<li class="menu-mainmenu-2">
<span>Meet the Staff</span>
</li>
<li class="menu-mainmenu-3">
<span>Forms & Resources</span>
</li>
<li class="menu-mainmenu-4">
<span>Ask the Doctor</span>
</li>
<li class="menu-mainmenu-5 last">
<span>Contact Us</span>
</li>
</ul>
CSS:
.menu-mainmenu {width:960px;}
.menu-mainmenu li {text-align: center; padding:12px 0 20px;}
.menu-mainmenu-0 {width:100px;}
.menu-mainmenu-1 {width:217px;}
.menu-mainmenu-2 {width:155px;}
.menu-mainmenu-3 {width:191px;}
.menu-mainmenu-4 {width:158px;}
.menu-mainmenu-5 {width:139px;}
Increasing your #jsn-page width to 961px makes 31px padding on your links work in chrome.
Edit:
See Dennis' response below. A fixed width for each item will be the most reliable.
.main-menu > li > a {
width:160px;
text-align:center;
padding: 12px 0px 20px 0px;
}
You should note that webkit rounds em to one decimal point, so, your 1.82em becomes 1.8em, when you calculate what that actually is on a pixel level, you may even be getting additional pixel differences. em is great if you need it, but difficult to work with if you are looking for pixel perfection.
This is an alternative answer, as it depends on what browsers you need to support. If you don't need to worry about ie6 or ie7, then you can use display:table-cell.
http://jsfiddle.net/BU9Gb/
Relevant css:
.menu-mainmenu {width:980px;display:table;}
.menu-mainmenu li {display:table-cell;}
.menu-mainmenu a {display:block;padding:15px 30px;text-align:center;}
Related
Is it possible to have the first line of text (or inline-blocks) aligned to the left, while the next one to the right using only CSS? I'm sure it can be done using JS, but am looking for a cleaner and simpler solution.
I have this navigation bar (which is a <ol> in the markup). It's usually one-line long, but recently we got a case, when it's grew long enough, so that it broke to the second line. Below is the photo of that. What my boss asked me to do is align the second line to the right, while keeping the first intact.
Now it looks like that:
What I'm aiming for is this (I'd then make some fixes to make it look prettier than on the picture below):
The markup. All li items are inline-blocks, but I could change that.
<ol class="phase-labels">
<li class="phase-label phase-current">Company</li>
<li class="phase-label phase-inactive">The Policy</li>
<li class="phase-label phase-inactive">Property Insurance</li>
<li class="phase-label phase-inactive">Additional Clauses</li>
<li class="phase-label phase-inactive">Public Liability</li>
<li class="phase-label phase-inactive">Public Liability Additional</li>
<li class="phase-label phase-inactive">Employers Liability</li>
<li class="phase-label phase-inactive">Quotes</li>
</ol>
You could try using direction propertie + text-align:justify to fill up entire first-line.
What does this involve? :
it reverse the reading direction of li (as inline-boxes) and
punctuation.
if only one line , lis stand towards right.
DEMO
Basic CSS
ol {
display:block;
position:relative;
direction:rtl;
text-align:justify;
}
Note: too bad text-align cannot be overwritten through the pseudo class :first-line.
You have the display:flex propertie too. DEMO
Basic CSS :
ol {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
}
I did misunderstand what he was looking for sorry everyone, why not try this. I think the following css should work.
ol{
float: right;
}
ol li{
float: left;
}
This answer is based around the idea that if the nav bar has exceeded the parents width, then it's float won't necessarily matter, but aligning everything to the right ensures it positions where you want. And floating the list items to the left, allows everything to be displayed in the proper order
I am using the <ul><li> list tag within which I have 3 tags like sos:
<ul id="reg-lists" >
<li class="one">
<select>...</select>
</li>
<li class="two">
<select>...</select>
</li>
<li class="three">
<select>...</select>
</li>
</ul>
I have the proper css to make the list horizontal:
#the-form li {
display:inline !important;
list-style-type: none;
padding-right: 10px;
}
I does'nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks
It works fine for me -- see this JSFiddle -- the list items are displayed horizontally, at least they are when I look at it in Firefox.
If you're seeing something else in another browser, please let us know.
If this is case, the solution may be to use display:inline-block instead of display:inline.
inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.
Hope that helps.
You need to give your <ul> a set width which is equal to the width of all the combined <li>'s and then set your <li>'s to float:left;
If you paste the following code into a test.html and browse with firefox,it's ok.
But if you browse with IE,you can see that there are more space to the right of <a> element.:
<style>
li {
display:inline;
margin:0 90px;
padding:6px 12px;
background:#777777 none repeat scroll 0 0;
}
li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
</style>
<div id="tabs">
<div class="nav">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
EDIT:How to make the text even in IE?
To answer your question simply: put all your li elements on a single line or float them.
I did look at your source and tried it for myself.
In Firefox 3.0.11 and Internet Explorer 8 I was showing pretty much identical pages.
One thing I can say is that the pages looked different initially because my browsers were at different widths but not the margin problem you were having. In my case resizing the browser worked.
But the problem you're having is common. Internet Explorer will almost always display pages different than a typically standards-compliant browser will. One way that people have found to work around this (and this may very well solve your problem) is to use a CSS Reset sheet.
Some good ones are:
Eric Meyer's Reset CSS
Yahoo! YUI Reset CSS
The problem is an unfortunate disagreement between the browsers as to where the CSS box model decides what to do about the padding:
IE decreases the space for the content within a div when you increase the padding, so keeping the div size the same
Firefox increases the div size with the padding, keeping the content size the same.
Tested in IE6, it seems to add an extra space to the anchor tags. Copy and Paste it and you will see for yourself. Firefox does not add the extra space.
You can change the margin for IE if you want. Its not a perfect solution, but it may help you to make the tabs look similar. If you need it to be identical in all browsers, you could always use an image instead. But try this:
li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
*html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}
*+html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}
Is there an easy way to distribute inline elements within a parent block container using CSS? Setting margins to auto doesn't work since the margins between inline elements are set to 0 and I don't want to mess around with percentages as the content is dynamic.
In particular, I have several anchor elements (a) within a paragraph (p) that spans 80% of its container and I'm looking for an easy way to distribute them evenly within the paragraph.
EDIT (#cletus): The paragraph will not wrap and the anchors are the only thing in the paragraph. By distribute evenly, I mean that the space between the left (right) edge and first (last) element and the elements themselves is equidistant.
Unfortunately, this is not possible with CSS. However, in the special case where your elements are of equal width, this CSS hack makes it fairly easy.
With equidistant spacing between variable-width elements even specifying widths in percentages for each element's container will not suffice. This would still create a variable width between the elements.
This is probably possible to do with JavaScript on most modern browsers. Here is an example page demonstrating a poorly implemented JavaScript hack and proof that attempting to use text justification to solve this problem will not work reliably.
If CSS3 is acceptable (ie, if how it looks in IE6 is not of primary importance), you can use the display property values of "table" and "table-cell" to use the table display model with any type of element; "inline-block" is also something to consider, which acts like a block without breaking a new line.
Hmmm, sounds to me like you're creating a menu? You might want to use a list to hold your anchors and style the list accordingly. This is the commonly accepted best practice.
As for even distribution of elements, I was looking yesterday for something similar, I was hoping it would be in the CSS3 spec, but it's not (at least I can't find it) which seems like a major f*ckup if you ask me. Anyway...
Which leaves two options. CSS, and Javascript.
With CSS, use the margin-right property for each element. It's a good idea to create a .last class that sets margin-right to zero which prevents your last element from breaking the layout.
There's a bunch of javascripts out there that will do this for you. I prefer only to use JS when absolutely essential, so I couldn't comment on which one is best.
... there is one last thing you could try, but... you didn't hear this from me ok?
You could use a table. That is the quickest (and dirtiest) way to get what you want.
IMHO, and you probably don't want to hear this, but the design is probably flawed. It's common knowledge that distributing items evenly across a layout with CSS is a pain, so designers should avoid it.
UPDATE: You could also try
.link_container { text-align: center; }
.link_container a { margin-right: 10x; }
.last { margin-right: 0; }
then use something like this
<div class='link-container'>
<a href='...'>Some line</a>
<a href='...'>Some line</a>
<a href='...'>Some line</a>
<a class='last' href='...'>Some line</a>
</div>
That might get you close.
Best solution I've found is to center align the containing div then give each of the links a fixed and reasonable left and right padding that can accommodate both the long links and short ones. While this won't evenly space your links all the way across the top bar it will provide a visually pleasing effect.
<div style='text-align:center'>
<a style='padding-left:10px;padding-right:10px'>Link 1</a>
<a style='padding-left:10px;padding-right:10px'>Link 2</a>
<a style='padding-left:10px;padding-right:10px'>Link 3</a>
</div>
It's a bit unclear what you mean by "distributing evenly"; Could it be that you want to justify the contents of the paragraph?
p { text-align: justify; }
do your anchors have specific widths set? i think that might be necessary for any margin auto's to work.
using display: table on the container and display: table-cell on the items within seems to do the trick for me. It even works in IE8
<!DOCTYPE html>
<html>
<head>
<!-- insert reset CSS here -->
<style type="text/css">
#header {
width: 940px;
margin: 0 auto;
background-color: #E6EFE6;
}
#main_nav {
width: 100%;
display: table;
}
#main_nav .nav-item {
display: table-cell;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<ul class="" id="main_nav">
<li class="nav-item first">
Item 1
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item">
Item 2
</li>
<li class="nav-item last">
Item 3
</li>
</ul>
</div>
<body>
</html>
I have used the code below to divide the pages into two halves, 28% and 72%. But the background color set by the wrapper tag should fill 28%; in my case it works fine in Internet Explorer 7.
In Internet Explorer 6, the background color is visible across 100% of the width instead of 28%.
How do I fix this?
My code:
#wrapper{
float:left;
width:28%;
background:#f5f5dc;
}
HTML
<div id="wrapper">
<ul id="testnav">
<li> LOCATIONS
<ul id="subnav">
<li id="content_1">Note </li>
</ul>
</li>
</ul>
</div>
It is an ancient Internet Explorer bug, and it happens only if there is both of complex CSS and complex HTML. For example, in https://drupal.org/node/129014 it happened, too.
What worked me: I specified background-color on both of the parent and the child (in your case, #wrapper), and both DOM nodes also got a zoom: 1.