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;
}
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 cannot work out why the browser is not allowing me to set a margin-top or padding-top on a DIV to allow me to center the text.
HTML -
<div id="header">
<div id="Nav">
<div id="navright">
Home
About Us
Contact Us
Find Us
</div>
</div>
</div>
CSS -
#nav {
width: auto;
position: relative;
}
#nav a {
margin-left: 5px;
margin-right: 5px;
text-decoration: none;
font-family: "Arial";
font-size: 14pt;
color: #ffffff;
position: relative;
margin-top: 10px;
}
Result -
Any ideas where I am going wrong? Thanks
You are writing Nav nog nav
Html code should be:
<div id="nav"> not <div id="Nav">
Thats why your css doesn't work on the div
And use line-height for your a
#nav a {
line-height: (pixel height of the li or nav);
}
Working JsFiddle here
try to add display:inline-block; in you links
#nav a {
...
display:inline-block;
}
and rename <div id="Nav"> to <div id="nav">
add display: inline-block; to your a tag
demo
and obviously correct your typo Nav to nav.
#nav a {
text-decoration: none;
font-family: "Arial";
font-size: 14pt;
color: #ffffff;
position: relative;
height:25px;
line-height:25px;
margin:5px;
display:inline-block;
}
If you want the margin-top to appear you'll have to declare display: inline-block for the <a> elements, as someone already pointed out. If you want the text to be vertically centered, though, you could also work with something like line-height: 50px;.
Here's a fiddle to play with.
And you should of course correct the misspelling of your CSS selector or the HTML id attribute as mentioned by several users.
Add
display:inline-block
in #nav a
just add line-height as same as the height of your nav <div>
And do correct the typo error.
eg:
#nav {height:20px; float:left;}
#nav a {line-height:20px;}
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
I'm trying to style a menu, but I keep running into this weird margin that's appearing in both FF4 and IE.
This is the only affecting css:
#header ul
{
display: inline;
}
#header ul li
{
list-style-type: none;
background: #000;
display: inline;
margin: 0;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
And this is the HTML:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
</div>
As you can see, there's a margin appearing on both sides, and I'd like it so it would have no margin (or maybe 1px would be okay)...
That's no moon...i mean...margin.
What you're seeing is the white space between your elements. Inline-block treats the elements as inline, except they have heights, widths, margins, paddings, etc. What happens is the newline + spacing you've given your html elements for nice indentation is being displayed as a space between the elements.
inline-block is also not cross-browser consistent. I'd suggest using display:block; with floats.
Edit to add suggestion:
If you want nice indents, but want to avoid extra white-space (as in all XML data ever), use what I call the "fishy notation"
Instead of:
<div id="header">
<ul id="toplinks">
<li>Hello</li>
<li>Herp</li>
<li>Derp</li>
</ul>
Use:
<div id="header"
><ul id="toplinks"
><li>Hello</li
><li>Herp</li
><li>Derp</li
></ul
></div>
White space contained by elements is preserved, but white space within elements is not.
Time to whip out that CSS Reset! I first include this, and then start designing. It makes it much easier, as most HTML will look identical cross-browser.
But to fix your problem, I would check if there is a stray border property somewhere. I've had rogue borders before, and they drove me mad. To kill it (for now), try this:
border-style: none;
If we had the complete CSS (don't worry, we don't steal it), I could actually fiddle with it and give you a fully functional answer.
change your CSS to
#header ul
{
display: inline;
}
#header ul li
{
float:left;
background: #000;
margin-left: 1px;;
padding: 0;
}
#header ul li a
{
color: #fff;
text-decoration: none;
display: inline-block;
width: 100px;
text-align: center;
}
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.