I have the following menu. Seems to work in all browser but not IE6 or IE7. What is causing the problem and How can i fix that.
Check working example at http://jsfiddle.net/2ysCC/
#menu_wrap {
margin-top:20px auto 0 auto;
padding:0;
width:780px;
height:40px;
list-style-type:none;
}
.button a {
cursor:pointer;
text-align:center;
font:13px/100% Arial, Helvetica, sans-serif;
font-weight:bold;
position:relative;
min-width:50px;
height:20px;
float:left;
padding:10px;
padding-right:0;
text-decoration:none;
}
.Red, .Red .button a {
color:#faddde;
background: #ed1c24;
}
.button:last-child a {
float:left;
border:none;
}
<ul id="menu_wrap" class="Red">
<li class="button">Home</li>
<li class="button">portfolio</li>
<li class="button">Latest</li>
</ul>
This is how it looks in IE7
Add 'display: inline;' to your 'li'.
#menu_wrap .button {
display: inline;
}
Here is an article describing the bug in further detail: http://css-tricks.com/501-prevent-menu-stepdown/
Float the li tags instead of the a tags:
.button {
float: left;
}
JSFiddle
Try to remove position: relative and make it float: left
Use this CSS, float left element <LI>
li.button{
float: left;
}
Related
http://jsfiddle.net/Fy5v8/
I haven't been able to solve this issue, or seen it before—it's subtle, but I of course want it to be perfect. I don't see any reason why it should be displaying strangely.
The bottom of the image and the navigation should be aligned, but are not. Here is the incorrect version in firefox:
http://jamimiles.com/firefox.png
Or visit it on your own browsers. Thanks so much for your help!
#header {
font-family: georgia, serif;
width:800px;
height:65px;
font-size:20px; font-size:2rem;
color:#3a3b59;
text-transform: uppercase;
text-align:left;
padding:0 0 30px 0;
margin-top:0;
border-bottom: none;
float:left;
position:relative;
}
#header ul li {
list-style-type:none;
line-height:20px; line-height:2rem;
float:right;
}
#header li {
padding-left:20px;
}
#header ul {
margin-top:52px;
padding:0;
float:right;
margin-bottom:0;
}
#header img {
padding:0;
border:none;
float:left;
}
That's the CSS. Here is the header band.
<div id="header">
<img src="images/namebanner3.png">
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>resumé</li>
</ul>
</div>
Try tweaking the img px. You are currently set at 851px by 141px
<img height="#" width="#" style="-webkit-user-select: none"
src="http://jamimiles.com/firefox.png">
I have done this code for a bit of extra study but I can't seem to center the work and I'm not to sure if I need so much code feel like some should be removed, please help!
If some of the code needs to be taken away I understand just dont quite understand and I feel like everything I Read make me more lost and Just keep changing my code with no solution :(
#menubar{
background:#3399CC;
height:120px;
}
#menubarwrap {
margin:0 auto;
width:100%;
}
#navigationbar-main {
float:left;
padding:15px;
color:#000;
font-size:24px;
font-weight:bold;
list-style-type: none;
margin-bottom:10px;
text-align:center;
}
#navigationbar-main li {
margin-right:35px;
position:relative;
}
#navigationbar-main li a {
display:block;
color:#000;
}
#navigationbar-main li ul {
display:none;
z-index:80;
}
.nav-sec {
display:block;
font-size:12px;
font-family: lucida sans unicode;
font-weight:normal;
text-align:center;
}
HTML
<body>
<div id="menubar">
<div id="menubarwrap">
<ul id="navigationbar-main">
<li>Home<span class="nav-sec">Where We Start</span></li>
<li>Gallery<span class="nav-sec">Pure Beauty</span></li>
<li>Contact<span class="nav-sec">Come Book</span></li>
<li>Features<span class="nav-sec">Pure Luxury</span></li>
<li>Location<span class="nav-sec">Where Are We?</span></li>
<li>Rates<span class="nav-sec">Price Of Love</span></li>
</ul>
</div>
</div>
</body>
sorry I'm just fairly new to all this
I am providing with two solutions guessing its what you need:
Fiddle 1
Change
#navigationbar-main {
margin:0px auto;
/*removed float
Other styles remain same*/
}
Fiddle 2
Change
#navigationbar-main li {
display:inline-block;
/*Other styles remain same*/
}
change your ul css
#navigationbar-main {
color: #000000;
font-size: 24px;
font-weight: bold;
list-style-type: none;
margin: 0 auto 10px;
padding: 15px;
text-align: center;
width: 1000px;
}
and give flat:left to your li
If you are trying to center align the #navigationbar-main ul, do this
#navigationbar-main ul{
float:left /*remove this line*/
}
This will get you the ul to the center of the page horizontally.
And if you want to align the li items horizontally apply this:
#navigationbar-main li {
display:inline-block;
}
#navigationbar-main {
width: 100%;
}
Add this to your CSS,
I don`t understand why I have margin from the left:
CSS:
html, body {
font-family:Myriad Pro, sans-serif;
font-size:18px;
color:#000;
margin:0px;
padding:0px;
background: url('./images/background.png');
}
#container {
width:890px;
height:530px;
margin:36px auto;
}
#userList {
width:228px;
height:355px;
float:right;
border:1px solid #cccccc;
}
.users li {
list-style-type:none;
background-color: #f2f2f2;
width:100%;
height:50px;
border-bottom: 1px solid #cccccc;
}
HTML:
<div id="userList"><ul class="users"><li><img src="./pic/none.png">Piet van Meerdijk</li><li><img src="./pic/none.png">Henk v/d Wal</li></ul></div>
When I put margin-left:-40px; in the CSS code the li item will be on the left now, but then have I a margin on the right. Why?
JSfiddle: http://jsfiddle.net/8Cwcy/
The <ul> tag has an automatic padding of 40px so you will need to change that to 0px:
ul {
padding: 0px;
}
This should work across all browsers.
Fiddle: http://jsfiddle.net/8Cwcy/3/
By default a lot of HTML elements have their own CSS rules in many browsers, and <ul> tag has a padding by default. You need to set padding:0px to de <ul> tag:
ul{
padding:0px;
}
http://jsfiddle.net/8Cwcy/1/
If you want to know more about CSS reset rules follow this link.
I learn and use css and css3 around 2 years but i dont know 1 thing and i cant find a really good answer or fix for this.
So here is an example :
I created a div and inside this div we have a link (its a button).
When i hover my mouse on the div this div will change the bg-color but the link not because im above the div... So when im above the div this div and the link too will change the color or background this is what i need... But how to do it ? I never used this but now i think i'll need this for my next work :))
Thank you very much!
It's very easy to achieve using css: (working jsFiddle)
HTML:
<div class="container">
<a class="button">some text</a>
</div>
CSS:
.container:hover{
background-color:red;
}
.container:hover .button{ // selector for .button which is in a hovered .container
background-color:blue;
}
Try this:
<div id="test">
A link
</div>
CSS :
div#test:hover {
background-color: red;
}
div#test:hover a {
background-color: red;
}
What you're asking is the following CSS selector:
div:hover a{
/* your styles here */
}
Demo here
Hope this demo link will work for you.
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
.wrapper {
width:95%;
padding:10px;
overflow:hidden;
height:100%;
margin:0 auto;
border:1px solid green;
}
.spacer {
clear:both;
font-size:0;
line-height:0;
height:0;
}
.wrapper:hover {
background-color:#999999;
cursor:pointer;
}
.btmoOne {
width:170px;
margin:0 auto;
height:20px;
background-color:#FF0000;
padding:10px;
}
.wrapper:hover .btmoOne {
background-color:#006600;
}
I have some CSS and HTML for horizontal tabs that works perfectly in jsfiddle. However, in both Firefox 13 and IE6 (the browser I most need this to work in) the tabs are displayed as a vertical unordered list.
Here is the CSS:
.tablist
{
list-style:none;
height:2em;
padding:0;
margin:0;
border: none;
}
.tablist li
{
display:inline-block;
float: left;
}
.tablist li a
{
float: left;
margin-right:0.13em;
padding:0 1em;
text-decoration:none;
border:0.06em solid #000;
border-bottom:0;
font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
color:#000;
background-color:#ccc;
/* CSS 3 elements */
webkit-border-top-right-radius:0.50em;
-webkit-border-top-left-radius:0.50em;
-moz-border-radius-topright:0.50em;
-moz-border-radius-topleft:0.50em;
border-top-right-radius:0.50em;
border-top-left-radius:0.50em;
}
.tablist li a:hover
{
background:#3cf;
color:#fff;
text-decoration:none;
}
.tablist li#current a
{
background-color: #777;
color: #fff;
}
.tablist li#current a:hover
{
background: #39C;
}
And here is the HTML:
<div class="tablist">
<ul>
<li><strong>Tutorialsphere</strong></li>
<li><strong>Photoshop</strong></li>
<li><strong>Illustrator</strong></li>
<li><strong>Fireworks</strong></li>
<li><strong>Flash</strong></li>
<li><strong>CSS</strong></li>
<li><strong>PHP</strong></li>
</ul>
</div>
For a while this was working in Firefox and I don't remember changing anything -- but I must have.
Any advice is appreciated.
Regards.
IE6 doesn't support inline-block. As such, it's just ignoring your display property and leaving it at its default.
I don't have IE6 handy, but try display: block; float:left to this selector: .tablist li a