Hopefully this is something simple I am missing, I have an OL encompassing a set of LI links.
In Chrome and firefox this works perfectly, in IE8 they appear as a numbered list moving vertically down the page.
HTML:
<div class="header">
<img src="images/header.png" alt="Logo">
<ol>
<li>Home</li>
<li>page2</li>
<li>page3</li>
<li>page4</li>
<li>page5</li>
<li>page6</li>
<li>page7</li>
</ol>
</div>
CSS;
.header {
width:888px;
height:119px;
margin: 0 auto;
margin-top: 20px;
padding:0;
text-align: left;
}
.header ol {
margin-top: -32px;
width: 888px;
padding:0;
margin-left: 10px;
}
.header li {
font-weight: bold;
display: inline;
padding-right: 20px;
padding-left: 20px;
border-right: solid 1px;
border-right-color: #FFFFFF;
}
Is there something basic I am missing here? Doing some searching doesn't seem to provide me with a solution. There are some suggestions of using display: inline; on the LI but this doesn't appear to make any difference.
The behaviour I am looking for is horizontal ordering of the links as displayed in Chrome and Firefox.
IE8 and lower versions of IE have trouble implementing display:inline on many block-level elements.
You could try to float the lis...
so remove the display:inline and replace with something like float:left
Related
i'm pretty new to css and html and trying to make a site to work on improving and learning. I've been searching and cant figure out how to fix my menu in the sidebar, to me it looks like the li's in the ul are floating to the right for some reason, heres my code:
also Jsfiddle Link:
https://jsfiddle.net/h2bpxcxe/
#side-bar #recents {
width: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#recents h3 {
text-align: center;
padding-top: 4px;
}
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
}
#recents ul li {
padding: 2% 0px;
border-bottom: 1px solid black;
background: grey;
Thanks if somone can help! :)
UL-elements have a padding-left by default.
You need to reset this padding which will center your li-elements in your sidebar.
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
padding-left:0px; //Adding this will center your LI's
}
FIDDLE
a tip for when dealing with issues like this. Look at the element in your browsers developer tools. Padding and Margin will always be shown clearly there.
I feel there is also an issue with the positioning of the sidebar's list/ul element.
If you apply:
#recents ul {
position:absolute;
}
to your CSS, it will preclude the list element from overflowing the parent, which is the case with your current code. Here's a jsfiddle: https://jsfiddle.net/46t4f5zs/
just do like this
<div id="recents">
<ul><h3>Recent Posts</h3>
<li>Recent One
</li>
<li>Recent Two
</li>
<li>Recent Three
</li>
<li>Recent Four
</li>
</ul>
</div>
I have some html as below
<div class="wrapper">
<div class="LItms">
<div class="clr">
</div>
<span>text con</span>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
</div>
I have some css for them
with out position relative
.clr {
color: red;
display: list-item;
list-style-type: square;
font-size: 40px;
height: 16px;
width:16px;
margin-bottom: 17px;
margin-left: 23px;
}
with position relative
.clr {
color: red;
display: list-item;
list-style-type: square;
font-size: 40px;
height: 16px;
width:16px;
margin-bottom: 17px;
margin-left: 23px;
}
I tried both of them css, the issue is it work's fine in fire fox, but in chrome and ie, the size of bullet for div is smaller compared to firefox and even the space between
bullet and span next to div with class .clr is more when compared to firefox, i want them to be aligned same accross the browsers ... any work around plz...........
As I said in the comments,
different browsers might have a little difference in default styling.
Use a Normalizer it might help you.
Different browsers have different defaults. Reset everything using the following CSS at the very beginning of your CSS:
*{
margin:0px;
padding:0px;
}
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
My site was working fine across all major browsers right up until the update to Safari 5.1. Now, the primary navigation is busted up. I was using display:table-cell on the anchor element within the list element and was also using the font-size:0 hack to remove the spacing in between menu elements. Has anyone else encountered this issue and have a solution they could offer up?
Before:
After:
CSS:
#navigation {
padding-top: 7px;
}
#navigation ul.links, /* Main menu and secondary menu links */
#navigation .content ul /* Menu block links */ {
margin: 0;
padding: 0;
display: block;
font-size: 0; /* this is a hack so that the spacing between the menu buttons disappear
since they are inline-block elements, this should be unneccessary when
CSS3 is approved */
}
#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
display: inline-block;
padding-right: 0;
padding-left: 0;
margin: 0;
/* below is a fix for IE7 to get the main navigation items lined up correctly
* in one row
*/
zoom: 1;
*display: inline;
}
#main-menu ul {
width: 100%;
}
#main-menu li {
width: 108px;
text-align: center;
padding-bottom: 7px;
font-size: 11pt;
}
#main-menu a {
display: table-cell;
width: inherit;
text-decoration: none;
font-size: 0.9em;
color: #035B9A;
background-color: white;
height: 30px;
vertical-align: middle;
}
HTML:
<div id="navigation">
<div class="section">
<h2 class="element-invisible">Main menu</h2>
<ul id="main-menu" class="links inline clearfix">
<li class="menu-379 first">About Us</li>
<li class="menu-401">Research</li>
<li class="menu-385">Education</li>
<li class="menu-402">Outreach</li>
<li class="menu-403 active-trail active">News & Events</li>
<li class="menu-439">People</li>
<li class="menu-405">Resources</li>
<li class="menu-406">Publications</li>
<li class="menu-415 last">Partners</li>
</ul>
</div>
</div>
Thanks.
Just a note, this is a Drupal 7 site.
Also I freely and humbly admit I am not the very best at CSS markup. I'm learning a lot right now and am just trying to scrape through.
For those having trouble with Safari and dimensions for elements set to display:table; I was able to fix my problems by removing the padding and adding padding to a child element set to display:table-cell;
Apparently Safari does not like it when you try to add padding to an element set to display:table; In retrospect, this makes sense.
Solved by making the list elements display as block and float them to the left.
#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
display: block;
float: left;
padding-right: 0;
padding-left: 0;
margin: 0;
/* below is a fix for IE7 to get the main navigation items lined up correctly
* in one row
*/
zoom: 1;
*display: inline;
}
You want border-collapse:collapse on the display:table element to remove cell spacing.
I took your css and html, and added to the css
body {
background-color: gray;
}
and I got the following, which looks correct.
This was run under lion, which has Safari 5.1
I have list items that displayed inline.
I want to align them vertically inside the green div.
<div id="topMenu" class="topMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Documents</li>
<li>Articles</li>
<li>Info</li>
</ul>
</div>
.topMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.topMenu a
{
color: White;
font-weight: bold;
text-decoration: none;
}
.topMenu
{
background-position: center;
background-color: Green;
height: 30px;
font-family: arial, Helvetica, sans-serif;
font-size: 0.8em;
vertical-align: middle;
text-align:center;
}
online demo
You could add line-height:30px; to your li elements, (the same as the height of the menu bar)
Demo
You can just the display of your <li> elements a bit, like this:
.topMenu li
{
display: inline-block;
list-style-type: none;
padding: 6px 10px;
}
Check out an updated demo here
Alternatively, you could add the padding to the <ul> with a new rule:
.topMenu ul {
padding-top: 6px;
}
Check out that version here
In either case you may want to remove the height from .topMenu and let the top/bottom padding determine it, so when the page scales with zoom on older browsers it still looks "right".
You have to go with the padding property if you want to be strict xhtml and delete vertical-align.
Furthermore it makes no sense to try to align something vertically, that is displayed inline.
Just consider: padding is the inner space between the element and the boxmodel border.
Internet Explorer didn't support inline-block until version 8.
You might try the work-around here.