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.
Related
I need some help removing the margin that is between the top/sides and the menu.
I've tried for a while but nothing I do works. Here's a fiddle http://jsfiddle.net/knickemackan/9qmm6yrt/ that I've prepared for you.
Thank you so much for helping me. Marcus N
<div id="navigationwrapper">
<ul><li>Home</li>
<li>Contact</li>
<li>
Gallery
<ul>
<li>Music</li>
<li>Videos</li>
<li>Pictures</li>
</ul>
</li>
<li>About</li>
<li>News</li>
</ul>
</div>
That margin is from the <body>, remove it with,
body { margin: 0; }
It is a good idea to always use some sort of CSS Reset when you are working on a site.
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on. / Eric Meyer
This is happening because of the body's margin. Give it no margin like:
body{
margin:0;
}
JSFiddle
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;}
I have some classes that are grouped. However in IE7 and lower it doesn't implement any of the classes in the group. It just seems to ignore them:
#subnav a,
#subnav span {
/* css here */
}
And the html:
<div id="subnav">
<ul class="depth-1">
<li class="selected">
Some Link
</li>
<li>
Another Link
</li>
<li>
<span>Header</span>
<ul class="depth-2">
<li>
Google
</li>
</ul>
</li>
</ul>
</div>
Is CSS grouping not supported in IE7 and below or is something else causing this to happen?
Thanks
You could try a few things here:
make sure this rule group is last in the css stylesheet to ensure that no other styles are overwriting these ones
make the selectors as specific as possible, to ensure the elements are targeted. So, instead of #subnav a, try div#subnav ul.depth-1 li.selected a
make sure the styles can be applied to those particular elements. a and span are inline elements and do not accept all styles.
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;
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>