My code has been validated by w3school yet it still displays differently in IE and firefox.
My link bar allong the top seems to cascade down in IE but displays in a stright line (as it should be ) in Firefox!!!
My HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="lbf.css">
<title>Love British Film</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="main_container">fegerfg
<div id="header">
<div class="logo">Love British Film.com </div>
</div>
<div class="nav_bar">
<ul class="nav_list">
<li class="odd">Home</li>
<li class="even">Reviews</li>
<li class="odd">Forums</li>
<li class="even">Videos</li>
<li class="odd"><a href="index.html" >Downloads</a></li>
<li class="even">News</li>
<li class="odd"><a href="index.html" >Fun bits</a></li>
<li class="even">Contact us</li>
</ul>
</div>
<div class="main_text">
<div class="header">HEADER FOR MAIN CONTENT</div>
Main content!!
</div>
<div id="film_of_day">Film of day </div>
<div id="poll_of_week">asdnasdljasasdasfdasfasfas</div>
</div>
</body>
</html>
And My CSS code
body
{
background:url(bg.jpg) no-repeat #FFF center top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px auto auto auto;
}
div {
margin: 0px;
padding: 0px;
width: 0px;
}
#main_container{
width:1200px;
height:auto;
margin:auto;
padding:0px;
}
#header{
position:relative;
width:1200px;
height:170px;
background:url(header.jpg) no-repeat center;
background-position:0px 0px;
margin:auto;
padding:5px;
}
.logo{
width:auto;
height:auto;
font-size:20px;
position:relative;
top:80%;
text-align:right;
}
.nav_bar{
width:1200px;
height:50px;
}
ul.nav_list{
list-style-type:none; float:left; display:block; width:1200px;
margin:0px; padding:0px;
}
ul.nav_list li.odd a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left;
background-color:rgb(147,216,255);height:40px; line-height:40px; color:rgb(168,100,63);
}
ul.nav_list li.even a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; color:rgb(168,100,63);
height:40px; line-height:40px;background-color:rgb(26,142,165);
}
a.odd:link, a.odd:visited {
display:block;width:133px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; }
ul.nav_list li.even a:hover{background-color:#A29;}
ul.nav_list li.odd a:hover{background-color:#F99;}
a.even:link, a.even:visited {
display:block;width:133px; text-align:center; float:left;height:40px;text-decoration:none; background:url(images/home.png) no-repeat left; color:#676d77;}
a.even:hover{
color:#FFFFFF;
}
.header{
width:500px;
text-align:center;
margin-bottom:50px;
}
.main_text{
display:inline-block;
float:left;
width:600px;
height:600px;
background-color:rgb(147,216,255);
}
#film_of_day{
float:right;
width:340px;
height:250px;
background-color:rgb(147,216,255);
}
#poll_of_week{
margin-top:50px;
float:right;
width:280px;
height:250px;
outline:solid;
padding:1px;
}
Welcome to the real world.
IE and Firefoy interpret CSS different from each other. This was always a problem, and it will always be ! If you want to reduce different behaviours or looks, you could try to use a so called CSS reset.
What is a css reset ?
This is a simple css file, which resets every positioning, padding,margin, everything that comes by default from the browser to zero. So you can ensure that most of your styling will be interpreted the same. Sure still it will not alway be the same, but it helps you to put it in the right direction. You could also use GridLayouts for positioning, which is also a great tool and works and looks the same in the most browsers.
http://meyerweb.com/eric/tools/css/reset/
http://960.gs/
And just a hint, open it with opera,chrome, elder verions of IE, safari and you will be astonished that it also looks different ;-)
You are floating your a tag inside your li tag which isn't good practice and causing your problems.
You should float your li tag and leave your a tag un-floated inside as the link
See: http://jsfiddle.net/ZmhzA/1/
Related
i'm beginner in CSS and i try to do somethings but i encountered some problems and here is my problem
i have this peace of CSS code to repeat a background horizontally but i want background to cover just what i wrote not more (there is extra color shown under what i write , i can't upload my photo)
<!DOCTYPE html>
<html>
<head>
<style>
.Container_16 {
margin-left:auto;
margin-right:auto;
width:960px;
}
.Container_5 {
float:left;
}
#Title {
font-size:68px;
font-family:sans-serif;
}
.Container_11{
float:left;
color:white;
}
li{
list-style-type:none;
display:inline;
padding-left:15px;
color:white;
font-size:20px;
font-family:sans-serif;
margin-top:30px;
}
nav{
margin-left:150px;
text-align:right;
margin-top:30px;
margin-right:250px;
}
body{
min-width:960px;
background-image:url("bg.png");
background-repeat:repeat-x;
}
</style>
<body>
<div class="Container_16">
<div class="Container_5" id="Title">Book.me </div>
<div class="Container_11"><nav>
<ul>
<li>one</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav></div>
</div>
</body>
</head>
</html>
To apply background image to facebook link only, use this css:
#title > a {
background: url('bg.png') repeat-x;
}
Because you are giving the background to body. I see you have <div class="Container_16">
in which you have all your text. So you can set the background to that div only.
CSS
body{
min-width:960px;
}
.Container_16 {
margin-left:auto;
margin-right:auto;
width:960px;
height:100px;
background-image:url("image.png");
background-repeat:repeat-x;
}
DEMO
I'm building a test page with a menu bar, but the deviders (basically divs with a width of 1) position themselves differently in Chrome and Mozilla. I'm building it in Chrome, and find it weird that it is doing the positioning thing differently. Does anyone know what might be causing this? My code is as follows:
HTML
<head>
<link rel="stylesheet" type="text/css" href="global.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet' type='text/css'>
</head>
<!-------------------------------------------MENUDEV1------------------------------------------->
<div id="menuContainer">
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuLogo">
<a href="/home.html">
<img id="menuLogo2" src="http://www.placehold.it/126x50/ff0000/000000&text=Logo+gaat+hier">
</a>
</div>
<div id="menuDevide1"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuPortfolio1">
<a id="menuPortfolio2" class="menuClick" href="portfolio.html">portfolio</a>
</div>
<div id="menuDevide2"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuServices1">
<a id="menuServices2" class="menuClick" href="services.html">services</a>
</div>
<div id="menuDevide3"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuProcess1">
<a id="menuProcess2" class="menuClick" href="process.html">our process</a>
</div>
<div id="menuDevide4"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuContact1">
<a id="menuContact2" class="menuClick" href="contact.html">contact</a>
</div>
<!-----------------------------------DEVIDER----------------------------------->
</div>
<div id="menuBottomline"></div>
<!-----------Everything from MENUDEV1 up to this point should be considered as a whole.----------->
CSS
#menuContainer{
width:650px;
height:50px;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background-color:rgba(100, 100, 100, 0.46);
}
#menuLogo2{
height:50px;
width:126px;
}
/*ALL "menuDevide" IDS ARE TO BE NUDGED TO THE LEFT 2 TO 3 PIXELS AFTER THE MENU ITEMS HAVE BEEN PLACED!*/
#menuDevide1{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-47.5px;
left:131px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuDevide2{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-119.5px;
left:259px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuDevide3{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-191.5px;
left:386px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuDevide4{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-263.5px;
left:515px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuBottomline{
width:100%;
height:1px;
background-color:black;
position:absolute;
top:70px;
left:0px
}
.menuClick{
color:#000000;
text-decoration:none;
font-family: "Open Sans", Arial, sans-serif;
font-size:20px;;
}
.menuClick:hover{
color:#999999;
}
#menuPortfolio1{
position:initial;
top:-83px;
left:13px;
width:126;
}
#menuServices1{
position:initial;
top:-83px;
left:131px;
width:126;
}
#menuProcess1{
position:initial;
top:-83px;
left:131px;
width:126;
}
#menuContact1{
position:initial;
top:-83px;
left:131px;
width:126;
}
#menuPortfolio2{
}
#menuServices2{
}
#menuProcess2{
}
#menuContact2{
}
Alternatively, you could check out this JSfiddle
Every browser has its own default settings for font size, margins and/or padding around certain elements, etc. Webdesigners should aim to have their sites display well on all kinds of browsers, but these different default settings can easily lead to problems.
http://meyerweb.com/eric/tools/css/reset/ is a tool to reset all default css properties to zero in each browser. I tried to add it in your JSfiddle and the style was applying in the same way in FF and Chrome. OFC, now you have to rework it until the wanted result.
I'm a bit frustrated. I made a menu inline and blocked and centered it, but it's still a little to the right. I could adjust it with margin, but I think there's a better way to do it. Thank you for your help, I really appreciate it.
Here's the HTML:
<body>
<div id="home">
<div id="header">
<h1>Josh Lamstein</h1>
</div>
<div id="book">
<div id="topbar">
<ul id="menu">
<li>About</li>
|
<li>Stories</li>
|
<li>Blog</li>
|
<li>Resume</li>
</ul>
</div>
And here's the CSS:
#home{
width:900px;
height:480px;
margin:0 auto;
}
#book{
width:100%;
height:50%;
margin:0 auto;
background-color:;
text-align:center;
}
#topbar{
width:100%;
height:20%;
background-color:blue;
display:inline-block;
list-style:none;
list-style-type:none;
text-align:center;
margin:auto;
}
#menu{
list-style-type:none;
background-color:;
display:block;
display:inline;
font-family:"helvetica neue", helvetica, sans-sarif;
font-variant:small-caps;
font-size:1em;
letter-spacing:.5em;
margin:auto;
}
#menu li {
display:inline;
}
That's because browsers apply a default padding-left property to HTML list elements such as <ul> (Google Chrome set -webkit-padding-start: 40px;).
You could reset the padding property by:
#menu {
/* other CSS declaration here ... */
padding: 0; /* <-- Reset the default padding of user agent stylesheet */
}
Here is the JSBin Demo.
I am trying to replicate layout of html5doctor.com. I have IE8 installed here.
I am able to produce following output:
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
</div>
<div id="nav">
<div id="navmenus">
<ul id="navmenulist">
<li class="menu" id="id1">
Home
<li class="menu">
Products
<li class="menu">
About Us
</ul>
</div>
</div>
<div id="content" >
<div id="article"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS
/*I have added CSS Reset from http://meyerweb.com/eric/tools/css/reset/
Just deleted it for simplicity
*/
body
{
margin:0px;
padding:0px;
background-color:#E8E8E8;
text-align:center;
}
#header
{
background-color:#1F7ADB;
width:100%;
height:150px;
}
#nav
{
background-color:#1F7ADB;
width:100%;
text-align:center;
}
#navmenus
{
background-color:#14B3F7;
width:900px;
text-align:left;
}
li.menu
{
list-style:none;
display:inline;
height:35px;
padding:12px;
}
li.menu:hover
{
background-color:yellow;
}
li.menu a
{
text-decoration:none;
font-family:Arial;
font-size:18px;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
}
Notice li.menu:hover in above CSS. It is not working in IE8. So I added <!DOCTYPE html> as suggested at this thread.
It made hover work but now it broke the layout as follows:
I will like to get result that will work on IE8 first and then will like to learn work around that will work consistently in major (may not be in IE6) browser. And will glad to stick to CSS and HTML (no script). And above all will like to learn whats exactly wrong here.
Remove the text-align:center; from the body and use margin:auto for the block elements you want centered in the page..
The elements that require it are #navmenus and #content, so
#navmenus
{
background-color:#14B3F7;
width:900px;
margin:0 auto;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin:0 auto;
}
I would update the CSS for the content area to this:
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin: 0 auto;
}
Using the margin will center this element, rather than trying to use text-align on the parent element.
i have made a toolbar using links placed inside listitems but the problem is that i cant get my toolbar to sit on a "div" placed below it. This is what i want to see.
but this is what am getting in firefoxNotice the space between my 'toolbar' and the div below it. Questionswhy is the code displaying properly in jsfiddle but displaying badly if i run it directly in fierfox?How can i solve the problem?
ps:
here is the html
<html><head>
<link rel='stylesheet' type='text/css' href='style.css'>
</head><body>
<div id='headercontainer'>
<h2>welcome to research club</h2>
<ul class='mainNavigation'>
<li><a class='currentPage' href='#'>Home</a></li>
<li><a href='#'>Meetups</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>About</a></li>
</ul>
</div>
<div id='page'>
<p> this is a simple paragraph inside the page that is full of meaningless words but tries to populate a page . mama miya tolina galya mamba eno.</p>
</div><!--#page-->
</html>
Here is the css
div#headercontainer
{
position:relative;
}
div#page
{
margin:0px 50px 0px 50px;
padding:0 450px 0 30px;
position:relative;
background:#181C21;
clear:right;
color:white;
}
ul.mainNavigation
{
list-style:none;
margin:0px 50px 0px 0px;
position:absolute;
bottom:0; right:0;
padding:0;
}
ul.mainNavigation li
{
background:#192839;
color:white;
float:left;
height:1.6em;
padding:5px;
}
ul.mainNavigation li a
{
color:#bbbbbb;
display:block;
text-decoration:none;
height:1.6em;
font-size:0.9em;
}
ul.mainNavigation li a:hover
{
border-bottom:2px solid #0F67ff;
color:white;
}
ul.mainNavigation li a.currentPage
{
border-bottom:2px solid #176092;
}
I'm guessing that you haven't added a general selector to put all margins and paddings to 0, in this case you would need to add:
div#headercontainer {
position:relative;
padding:0px;
margin:0px;
}
or
*{
padding:0px;
margin:0px;
border:0px;
}
All browsers have some basic setups for non defined elements meaning I can set the I want all texts to be white instead of black and if you haven't set the color all the texts will be written in white.
Hoping this will help…
Use float and clear instead of position absolute.
Like this:
div#headercontainer{
float:left;
position:relative;
}
h2{
float:left;
}
ul.mainNavigation{
float:right;
}
#page{
clear:both;
float:left;
}
Hope this help... (This is my first answer on this website :S)