This is a follow-up to my last question. Thanks to "mu is too short" I can now demonstrate my problem in a fiddle.
I have the following code.
I want the code to show the list circles to the left of the text but to the right side of the .img DIV. This works in Firefox and in Opera but in IE they are positioned to the very far left. I can't understand why they are positioned differently in the two browsers. Help would be much appreciated.
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
Here is a fiddle
Demo 1
I did a couple of things based on my experience. Most importantly:
I have floated the UL towards left
I have zeroed out all margin/padding on the UL (except padding left so that the bullet stays there)
I have zeroed out all margin/padding on the LI
Note that different browsers have different defaults for margin/padding on UL and LI hence the normalization.
Demo 2
This is almost the same as above except UL is not floated, instead a left-margin is used.
My CSS isn't great, but I think you need something like this:
.fp1 .col ul { display: inline-block; float: left; margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
I can't explain why IE does nonsense like this, save for saying IE does this kind of thing all the time!
The solution is condintional comments.
These allow you to point different css at IE versions only: http://www.quirksmode.org/css/condcom.html
so
<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
Would target all IE versions, just as
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Would target IE6 only .
so this should fix your problem
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style><!--
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0; background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
--></style>
<!--[if IE]>
<style><!--
ul li {
margin-left: 80px;
color: red;
}
--></style>
<![endif]-->
</head>
<body>
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
</body>
</html>
Related
For some reason User Agent overrides my css, and puts a margin on top of a website i'm creating. I've searched stackoverflow for answers, but none seem to solve my problem.
Here's an example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="site-wrapper">
<div class="menu">
<div class="nav">
<ul>
<li>EXAMPLE</li>
<li >EXAMPLE</li>
<li ><a data-method="delete" href="/users/sign_out" rel="nofollow">EXAMPLE</a></li>
</ul>
</div>
</div>
<div class="content">
<p id="notice"></p>
<div class="container">
</div>
</div>
</div>
</body>
</html>
CSS:
html,
body {
height:100%;
width:100%;
margin: 0px;
display: block;
}
.site-wrapper {
display: block;
background-color: yellow;
width: 100%;
height: 100%;
}
.nav {
background-color: red;
}
.content {
background-color: blue;
width: 300px;
height: 300px;
}
.menu {
font-weight: 400;
top:50%;
margin-top:-115px;
position:absolute;
width:100%;
text-align: center;
font-size: 12px;
letter-spacing: .75;
}
ul {
list-style: none;
line-height: 40px;
padding: 0px;
display: block;
}
http://plnkr.co/edit/8IO5ux16x40UhKeSDJvN?p=preview
Paragraphs have a default margin. Eliminate it:
p {
margin:0;
}
jsFiddle example
The problem is caused by margin collapsing - parent elements don't have margin (or padding) so paragraph's margin is used.
You could either remove margin from the paragraph as suggested by j08691 or you can prevent margin collapsing by adding styling to parent containers - see this question: How to disable margin-collapsing?
For example this will help:
.content {
display: inline-block;
}
You can use this code to set margin for all elements
*{
margin:0;
padding:0;
}
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
I have "Awkward Showcase" running in my page, but above I have a dropdown menu. The thing is that the showcase overlaps the menu and it is not completely visible.
I could correct that changing z-index, but it only works when I put:
negative Index to Awkward Showcase
positive index to DropDown Menu
Because of this, as the showcase has arrows to navigate trough sliders, there is no way to click on each. It seems like they (arrows) arre behind a transparent layer, because they arre visible, but inactive.
My codes:
Menu
<div id="navmenucontainer">
<ul id="navmenu">
<li class="main" onclick="javascript: Mostrar(this);" id="menitem1">Productores
<div class="sub" onmouseout="setTimeout('Cierro(this)', 1000);" onmouseover="Sigue(this);" style="width:204px; overflow:hidden;">
Some menu items
</div>
</li>
</ul>
</div>
Slideshow
<div id="showcase" class="showcase">
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<img src="images/1.jpg">
</div>
</div>
<div class="showcase-caption">
</div>
</div>
CSS
#navmenucontainer {
z-index:999999;
}
*/ul#navmenu div.sub{
display: none;
background: url('images/menu/bgcat.png') repeat-x bottom #FFF;
position: absolute;
top:26;
left:0;
vertical-align:top;
padding-top:0;
padding-bottom: 22px;
width:1240px;
/*border-right:1px solid silver;*/
border:1px solid silver;
z-index:99999;
zoom:1;
}
ul#navmenu li {
margin: 0;
/*border: 0 none;*/
padding: 0;
float:left; /*For Gecko*/
display: inline;
list-style: none;
height: 20px;
}
ul#navmenu ul {
margin: 0;
padding: 0;
float:left;
width:100%;
}
.showcase
{
position: relative;
z-index:-1;
margin: 0;
}
The overlapping occurs with ".sub" div, and ".showcase".
This is a longshot, but since it is IE after all... It could be either (almost)correct or disaster.. I have encountered the same problem, and it is a different solution every time depending on ones luck.. (IE sucks, just to quote and agree on the earlier comments)
Add this to your html
<!--[if IE]>
<style type="text/css">
#navmenucontainer {
z-index:3000;
}
ul#navmenu {
z-index:2000;
}
ul#navmenu div.sub {
z-index:1000;
}
.showcase {
position: relative;
z-index:0;
margin: 0;
}
</style>
<![endif]-->
Inspired from http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
I'm trying to learn CSS/HTML at the moment so sorry if there is a really obvious solution to this. I'm just using this to practice what I've learnt at the moment, but it keeps going wrong.
After literally hours of messing around with my code, I've finally got my navigation bar to align to the right, without messing everything else up. However it now won't sit in my "header" div. My basic structure is a header div, and within that a div for the logo (aligned to the left), and a div for the navigation menu (aligned to the right).
However after finally getting them aligned correctly, I can't seem to get my menu div in the right place. Here is a picture illustrating what I mean:
http://i.stack.imgur.com/ot5ls.png
I have temporarily changed the colour of my "header" div to black, to better illustrate my problem. As you can see, my menu is underneath the header div, and also slightly to the right?
Here is my HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home_p">
<div id="header">
<div id="logo">
</div>
<div id="menu">
<ul id="nav">
<li id="home"></li>
<li id="about"></li>
<li id="portfolio"></li>
<li id="contact"></li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS:
body
/* T5 */
{background-color:#fff8d3; font-size:100%;}
body#home_p #home{background:url('home.gif') 0 -45px;}
body#about_p #about{background:url('about.gif') 0 -45px;}
body#portfolio_p #about{background:url('portfolio.gif') 0 -45px;}
body#contact_p #about{background:url('contact.gif') 0 -45px;}
#header {
background-color:#000000;
height:45px;
width:1200px;
margin-left:auto;
margin-right:auto;
margin-top:90px;
}
#logo {
background-image('logo.gif');
height:45px;
width:181px;
}
#menu {
width:328px;
float:right;
}
#nav
{position:absolute;}
#nav ul{
display: inline;
}
#nav li{
height:45px;
margin:0px;
padding:0px;
list-style:none;
position:absolute;
right:0px;
top:0px;
display:inline;
float:right;
}
#nav a
{height:45px;
display:block;
}
#home{left:0x; width:62px;}
#home{background:url('home.gif') 0 0;}
#home a:hover{background: url('home.gif') 0 -45px;}
#about{left:62px;width:65px;}
#about{background:url('about.gif') 0 0;}
#about a:hover{background: url('about.gif') 0 -45px;}
#portfolio{left:147px;width:98px;}
#portfolio{background:url('portfolio.gif') 0 0;}
#portfolio a:hover{background: url('portfolio.gif') 0 -45px;}
#contact{left:265px;width:83px;}
#contact{background:url('contact.gif') 0 0;}
#contact a:hover{background: url('contact.gif') 0 -45px;}
I would really appreciate any help. Thanks in advance.
CSS:
body
{
background-color: #fff8d3;
min-width: 600px;
}
body#home_p #home, body#about_p #about, body#portfolio_p #about, body#contact_p #about
{
background-position: 0 -45px !important;
}
#header
{
background-color: black;
height: 45px;
width: 90%;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 90px;
}
#logo
{
background-image: url('logo.gif');
background-color: #fff8d3;
height: 45px;
width: 181px;
}
#nav
{
position: relative;
float: right;
padding: 0;
margin: 0;
}
#nav li
{
height: 45px;
margin: 0 -2px;
padding: 0;
list-style: none;
position: relative;
display: inline-block;
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}
#nav li:hover
{
background-position: 0 -45px;
}
#nav a
{
height: 100%;
width: 100%;
position: abosolute;
display: block;
}
#home
{
width: 62px;
background-image: url('home.gif');
}
#about
{
width: 65px;
background-image: url('about.gif');
}
#portfolio
{
width: 98px;
background-image: url('portfolio.gif');
}
#contact
{
width: 83px;
background-image: url('contact.gif');
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home_p">
<div id="header">
<!-- The floating elements have to go before the main content, or they will appear below. -->
<ul id="nav">
<li id="home" title="Home"></li>
<li id="about" title="About"></li>
<li id="portfolio" title="Portfolio"></li>
<li id="contact" title="Contact"></li>
</ul>
<div id="logo"></div>
</div>
</body>
</html>
By setting position:absolute on #nav but not giving it coordinates (left/top), it falls somewhere else. Add a border to it and you'll see. But let's put that aside:
You don't need the absolute position on the menu items. Set each to float:left with a margin
Set position:relative on #header, then anchor #nav to the top right with position:absolute
Since every link shares the same hover state, declare a:hover only once changing the background-position
Use an accessible image replacement method, keep the actual text in your HTML
Here's a scaffold for you to build on: http://jsfiddle.net/Pz3Q3/
I strongly recommend you to read this: http://na.isobar.com/standards/
The width you are setting on your #menu is causing havoc throughout your CSS. Your "#nav ul" isn't doing anything. But ultimately the problem is that your #logo needs to have a float: left;
All the absolute positioning is unnecessary. Use this:
#logo {
background-image('logo.gif');
height:45px;
width:181px;
float: left;
}
#menu {
float: right;
}
#nav li{
list-style:none;
display: inline;
}
I know this is a typical question but I cannot find the solution. My CSS drop down menu works fine everywhere but IE9. The drop down simply doesn't work in IE9. Any advice? Thank you.
Here is the menu HTML:
<div id="menu">
<ul>
<li><span>Needs Assessment</span>
<ul>
<li>History1</li>
<li>Team1</li>
<li>Offices1</li>
</ul>
</li>
<li><span>Design and Development</span>
<ul>
<li>History2</li>
<li>Team2</li>
<li>Offices2</li>
</ul>
</li>
<li><span>Prepare and Implement</span>
<ul>
<li>History3</li>
<li>Team3</li>
<li>Offices3</li>
</ul>
</li>
<li><span>Debrief and Measure</span>
<ul>
<li>History4</li>
<li>Team4</li>
<li>Offices4</li>
</ul>
</li>
<li><span>Resources</span>
<ul>
<li>History4</li>
<li>Team4</li>
<li>Offices4</li>
</ul>
</li>
</ul>
</div>
Here is my CSS for this menu:
#menu {
width: 942px;
height: 47px;
border: solid 0px #000;
}
#menu ul {
margin-left: 0px;
padding-left: 0px;
}
#menu ul li {
position: relative;
display: inline;
float: left;
list-style: none;
}
#menu li ul {
position: absolute;
margin: 0px;
padding: 0px;
display: none;
}
#menu li:hover ul {
display: block;
z-index: 999;
}
#menu li li a {
color: #fff;
}
#menu li li a:hover {
color: #ccc;
}
#menu ul li a {
display: block;
width: 188px;
padding: 12px 0px 10px 0px;
background:url 'http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
border: solid 0px black;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-align: center;
}
#menu a span {
float: left;
display: block;
padding: 3px 5px 4px 6px;
color:#fff;
float: none;
border: solid 0px black;
}
#menu a:hover span {
color:#bbb;
}
As Sparky672 said, your HTML is hopelessly invalid. You should fix it.
However, to fix the specific problem you're having, all you need to do is add a valid doctype as the very first line:
<!DOCTYPE html>
Without this, IE is in quirks mode.
Without seeing a demo, I have no idea if this will solve it, but you have a syntax error in your CSS. Missing the opening (.
This way always works for me...
background-image: url(http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png);
Edited as per comments and demo URL:
You have some serious HTML validation errors. (Edit #2: Originally, the very first listed error was a missing doctype which will throw IE in quirks mode.)
You have this in the top of your page...
<html>
<head>
<title>Debrief and Measure</title>
</head>
<body>
<html>
<head>
<title>Discover Simulation</title>
</head>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<link href="/Laerdal/_LOCAL_CONTENT/usa/css/discoversimulation.css" rel="stylesheet" type="text/css">
<body>
Notice all the duplicate <html>, <body> and <head></head> tags.
Then at the bottom of your page...
</body>
</html>
<div align="center">
<div id="whitebox">
...snipped...
</div>
</body>
</html>
Notice the extraneous </body></html> tags.
As an aside: align="center" has been deprecated.