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.
Related
I want to style the background of an icon. My code gives me an egg-shape but vertical, and I want the egg-shape to be horizontal. Also that the "egg" covers my icon in full. Is that possible?
Updated Fiddle... Fiddle
HTML:
<div class="car">
<div class="pull-left"> <i class="fa fa-calculator"></i></div>
</div>
CSS:
.car .fa-calculator {
color:black;
font-size:200px;
background-color:red;
display:block;
position:relative;
border-radius:80%
}
Use this CSS it will work
.car .pull-left i {
color:black;
font-size:200px;
background-color:red;
display:block;
position:relative;
border-radius:80%;
height:100px;
width:80px;
}
How about this;
.car .fa-calculator {
color:black;
font-size:200px;
background-color:red;
display:block;
border-radius:50%;
padding:.5em;
width:1.6em;
text-align:center;
}
I want the egg-shape to be horizontal. Also that the "egg" covers my icon in full.
For an 'egg' shape the element has to be wider than it is tall (if we are to use border-radius).
So setting uneven padding would seem to be an option.
.car .fa-calculator {
color:black;
font-size:100px;
background-color:#FF0000;
position:relative;
border-radius:50%;
padding: .2em .4em; /* adjust as required */
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<div class="car">
<div class="pull-left"> <i class="fa fa-calculator"></i></div>
</div>
I have worked very hard on this website but i have ran into an annoyance that I cannot seem to figure out! I am using Mozilla Firefox and unlike other webpages, when I zoom everything moves out of place! Usually that only happens when you resize but for some reason it is doing it for zoom also!! How can I fix this? Here is the code bellow:) Thanks! P.S. My zoom is at 90%, if there is a way to automatically set the zoom of browser when the user opens the page, please let me know!
*{margin:0; padding:0;}
.container{
width:100%;
height:100%;
background-image:url(backgrounds/background4.jpg);
background-size: cover;
overflow:hidden;
}
body{
width:100%;
}
.mainHeader{
width:100%;
height:100px;
background-color:rgba(0,0,0,0.6);
/*background-color:#182418;*/
/*opacity:0.7;*/
}
.mainHeader nav ul{
margin-right:70px;
float:right;
}
.mainHeader nav ul li{
display:inline-block;
margin-top:30px;
margin-right:20px;
}
.mainHeader nav ul li a{
text-decoration:none;
font-family:Arial;
font-size:25px;
color:#ACACAC;
margin-right:30px;
}
.mainHeader nav ul li a.active{
color:white;
}
.mainHeader nav ul li a:hover{
color:white;
}
.mainHeader img{
margin-top:-25px;
}
.mainArea .panel{
margin-left:25%;
margin-top:2%;
width:50%;
height:620px;
background-color:rgba(0,0,0,0.6);
}
.mainArea .panel h1{
color:white;
font-family:Arial;
padding:50px;
padding-left:60px;
text-align:center;
}
.mainArea .panel p{
color:white;
font-family:Arial;
padding:30px 50px 50px 50px;
text-align:center;
font-size:25px;
}
.mainArea .panel form{
margin-right:33%;
position:relative;
top:-5%;
float:right;
}
.mainArea .panel form .name, .email{
width:300px;
height:40px;
border-radius:10px;
margin-bottom:40px;
background:rgba(0, 0, 0, 0.55);
border:none;
padding-left:20px;
font-family:Arial;
font-size:20px;
color:gray;
}
.mainArea .panel form .body{
resize:none;
width:300px;
height:200px;
border-radius:10px;
margin-bottom:40px;
background:rgba(0, 0, 0, 0.55);
border:none;
padding-left:20px;
font-family:Arial;
font-size:20px;
color:gray;
padding-top:20px;
padding-right:30px;
}
.mainArea .panel form .submit{
width:90px;
height:43px;
background:rgba(0, 0, 0, 0.55);
border:none;
font-family:Arial;
font-size:20px;
color:gray;
padding-top:-3px;
border-radius:10px;
margin-top:-5px;
margin-left:100px;
}
.mainArea .panel form .submit:hover{
cursor:pointer;
}
<html>
<head>
<meta charset="UTF-8">
<title>About</title>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="contact.css">
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jqueryui.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
</head>
<body>
<div class="container">
<div class="mainHeader">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li><a class="active" href="#">Contact</a></li>
</ul>
</nav>
<img class="logo" src="logo.png">
</div>
<div class="mainArea">
<div class="panel">
<h1>Welcome to our contact page!</h1>
<form action="php/mail.php" method="POST">
<input type="text" value="Name" name="name" class="name"><br/>
<input type="text" value="Email" name="email" class="email"><br/>
<textarea name="message" class="body" rows="4" cols="50">What would you like to ask?</textarea><br/>
<input type="submit" value="Send!" class="submit">
</form>
</div>
</div>
</div>
</body>
</html>
And here is the background named background4.jpg Also, if you try to run the code snipet on this site it will get messed up because of the way stack overflow is laid out and because it needs the background image. So copying to a text file would work best.
if your elements get dispersed while zooming or re-sizing your browser window
use min-width and min-height for the containers
that will make them stay in the right way you like them
try to add this line :
.mainArea .panel {
min-width: 790px;
}
Unfortunately there isn't an universal way for browsers to zoom everything. At least not without a whole lot of scripting.
In my opinion it's also pretty weird to design a website and force browsers to 90%.
Zooming isn't what people do a lot (on desktop). Why not design a page at 100%?
I have the following HTML:
<div class="flag_container">
<div class="flag_1">
<img class="flag_img_1" src="../images/gb.png"></img>
<div class="speaker_1">
</div>
</div>
<div class="flag_2">
<img class="flag_img_2" src="../images/at.png"></img>
<div class="speaker_2">
</div>
</div>
<div class="flag_3">
<img class="flag_img_3" src="../images/de.png"></img>
<div class="speaker_3">
</div>
</div>
<div class="flag_4">
<img class="flag_img_4" src="../images/nl.png"></img>
<div class="speaker_4">
</div>
</div>
</div>
and CSS:
.flag_img_1{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_1:hover+.speaker_1{
display:block;
}
.speaker_1{
width:100px;
height:100px;
background-color:red;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_img_2{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_2:hover+.speaker_2{
display:block;
}
.speaker_2{
width:100px;
height:100px;
background-color:green;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_img_3{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_3:hover+.speaker_3{
display:block;
}
.speaker_3{
width:100px;
height:100px;
background-color:blue;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_img_4{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_4:hover+.speaker_4{
display:block;
}
.speaker_4{
width:100px;
height:100px;
background-color:orange;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_container{
padding:80px 0;
}
.flag_1{
padding-left:406px;
}
.flag_2{
float:left;
padding-left:163px;
padding-top:40px;
}
.flag_3{
float:right;
padding-right:163px;
padding-top:40px;
}
.flag_4{
padding-top:160px;
padding-left:406px;
}
Which creates the following display:
and on hover:
Where the blue square is a placeholder for an image.
This all works fine.
I want to make the display responsive, so when the screen gets smaller, the flags take a central formation like:
My problem is, it will not stay central, but will keep a fixed position in relation to the left. Here is my CSS:
.flag_container{
width:80%;
margin:auto;
}
.flag_1{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.flag_2{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.flag_3{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.flag_4{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.agendaHeading{
float:left;
font-size:120%;
}
.flag_img_1:hover+.speaker_1{
display:none;
}
.flag_img_2:hover+.speaker_2{
display:none;
}
.flag_img_3:hover+.speaker_3{
display:none;
}
.flag_img_4:hover+.speaker_4{
display:none;
}
I have tried every combination I can think of, and read many posts but it does not work. I suspect it is something to do with the structure of my divs preventing it from working as I want?
An example of CSS where I have managed to centre a div in the way I am trying to here is:
.box1{
width:85%;
margin:auto;
border:1px solid #ffffff;
float:none;
height:50px;
}
But this does not work.
Apologies for the long post/amount of code, but to demonstrate my problem I have to include it all.
I think the problem is that you are using pixels and no % in your paddings.
Did you tried to use % instead of fixed pixels in your padding-left,top and right on you css of .flag_*? I've bee playing a little bit with your code and using % gives you a more efficient way of organize the divs on a resized screen.
I am creating my own personal website as a test for what I have learned so far in HTML and JavaScript. I made the toolbar, and it looks nice on my monitor, which has quite a large width. I have the toolbar contents to be in the center. I tried accessing it on a smaller monitor, and the elements in the toolbar overlapped each other because I set the contents based on percentages. I know that measuring with pixels will come up with the same problem. How would I create a website where if the monitor width is larger than x pixels, then it will center the contents of the toolbar, but if the monitor width is smaller than x pixels, it will not center the contents of the toolbar?
As you can see in this jsFiddle, the elements overlap, but if you drag the view pane wider, you can see that it centers.
index.html:
<body>
<div id="header">
<div id="toolbar">
<div id="links">
<ol>
<li id="home">Home</li>
<li id="blog">Blog</li>
<li id="forum">Forums</li>
<li id="chatbox">Chatbox</li>
<li id="code">Code</li>
<li id="calendar">Calendar</li>
</ol>
</div>
<div id="login">
Username: <input type="text" name="firstname"></input>
Password: <input type="text" name="lastname"></input>
<button id="submit" class="button">Submit</button>
</div>
</div>
</div>
CSS:
body{
background-color:#EBF2F0;
margin-top:50px;
}
#links{
padding:0px;
margin:0px;
top:-10px;
position:absolute;
vertical-align: center;
}
a:link{
text-decoration:none;
color:#FFFF00;
}
a:visited{
text-decoration:none;
color:#FFFF00;
}
a:hover{
text-decoration:none;
color:#000BF2;
}
a:active{
text-decoration:none;
color:#FFFF00;
}
li{
display:inline;
padding:0px;
font-family:Courier;
}
ol{
list-style-type: none;
}
#header{
width:100%;
padding:5px 10px;
margin:0px;
height:25px;
top:0px;
left:0px;
position:fixed;
background-color:#000000;
}
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
}
#home,#blog,#forum,#chatbox,#code,#calendar{
padding:10px;
color:#000BF2;
}
#home:hover,#blog:hover,#forum:hover,#chatbox:hover,#code:hover,#calendar:hover{
background-color:#2E2E2D;
color:#000BF2;
}
#login{
color:#FFFFFF;
margin-right:30px;
text-align:right;
}
#submit{
margin-top:-7px;
margin-left:10px;
padding:6px;
}
If you need a CSS only solution you could play with min-width:
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
min-width:1200px;
}
Fiddle
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/