I'm having a little trouble having this behave exactly as I want across all browsers, but I swear I've done this before:
<!html>
<head>
<style type="text/css">
div { width:300px; }
ul { list-style:none; margin:0; padding:0; }
li { margin:0.25em 0.5em 0.25em 0; background:transparent url(http://cdn.iconfinder.net/data/icons/basicset/pencil_16.png) no-repeat scroll 0 0; float:left; }
a { padding-left:24px; }
</style>
</head>
<body>
<div>
<ul>
<li>Amazon</li>
<li>Barnes & Noble</li>
<li>Books-A-Million</li>
<li>Borders</li>
<li>Indie Bound</li>
<li>Powell's</li>
</ul>
</div>
</body>
This looks fine and dandy in most modern browsers, but in IE 6 and 7, the "Books-A-Million" link wraps.
I'd like to have the list items variable width and wrapping to new lines, but the links inside not wrapping. I can't figure out the magic combination of display types and CSS browser hacks to make it work. Has anyone tackled this issue before?
Add white-space: nowrap; to the a tags
Related
folks.
Today,I decided to install firefox and test my navigation bar out on firefox instead of google chrome. Firefox shows a random space ontop while chrome doesn't. Anyone know what the problem is and how to fix it?
This is what firefox looks like compare to chrome.(Sorry for the bad quality, I resized it bad.)
If it matters, this is the code i'm using:
<html>
<head>
<title>Blitz</title>
<style>
body{
margin: 0px;
padding:0px;
}
.Blitz{
background-color:#2DDEDE;
padding:0px;
margin:0px;
border-color:black;
}
.Navigationbar{
height:40px;
width:500px;
background:#a7e8ee;
border:none;
}
.Navigationbar li{
display:inline;
}
.Navigationbar a{
color:black;
text-decoration:none;
}
</style>
</head>
<body>
<div class="Blitz">
<h1><center>Blitz</center></h1>
<ul>
<div class="Navigationbar">
<li>Home</li>
<li>Forums</li>
<li>Blog</li>
<li>Featured</li>
<li>Sign up</li>
<li>Login</li>
</ul>
</div>
</div>
<div class="information">
<!--Information about the site here. Pictures to go with that-->
</div>
</body>
</html>
This issue is occurring because the margin-top of your header is poking out of the top of your div, and is not just due to newlines or whitespace in your HTML.
To prevent the margin of your header element from sticking out of the top of your div and affecting positioning, use overflow: auto; on your .Blitz element.
JSFiddle Example: https://jsfiddle.net/9676k73g/
Try taking out the newlines on your navigation so that it's all in one line in your HTML. It might look messy, but I have discovered in the past that an annoying space will render in some browsers just because the HTML is nicely formatted.
i tried to make a custom navbar since the standart navbar isnt really what i desire. It looks too casual so i try instead of using for the navbar, images.
I cant get them 4 images to line up in a row.
I saw there are 2 types of making it, once is defining a class through CSS and the other one is directly in the index.html. Are there any difrences in those 2 methodes?
Help would be super appericated. I tried like 30 websites with parts of the code but it seems like nothing is working im wondering what i do wrong.
greeting Queen
.navbar {
max-width:960px;
text-align:center;
}
.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}
.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
<body>
<div class="navbar">
<div class="navbar-special">
<ul class="nav">
<li class="home"><img src="http://i.imgur.com/GryNQfZ.png" /></li>
<li class="search"><img src="http://i.imgur.com/NfURGQL.png" /></li>
<li class="logo"><img src="http://i.imgur.com/sIwbaop.png" /></li>
<li class="partner"><img src="http://i.imgur.com/Ry9hIzC.png" /></li>
</div> <!-- div closing navbar -->
</div><!-- div closing navbar -->
</body>
http://jsfiddle.net/n32koz7q/1/
As it applys to styling, there are a few caveats which make putting styles in an index.html or an external stylesheet different.
Putting styles in an external stylesheet will (everything else held constant)...
—create a new HTTP request, and the external style sheet will be loaded after the index.html page (given that this page requests the stylesheet).
—change the order at which styles are applied. For example, if you have.
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello world!
</body>
</html>
<style>
.body {color:black;}
</style>
and mystyle.css:
body {
color: white;
}
the body would have a css property of color:black, since that style was loaded last. You can read about this here.
There are a few other differences, but these are probably the ones that are particular to your current use case.
As for your original question: here is an updated fiddle:
http://jsfiddle.net/n32koz7q/2/
You had a lot of unnecessary styling. I would start here, and then build up. Basically, the most basic CSS that your are going to use to get elements to sit inline, in this case, will look like so:
.navbar {
max-width:960px;
text-align:center;
}
li {
display:inline-block;
padding: 10px;
}
Essentially you just want those li elements to sit inline.
Good luck!
Just add the following code:
.navbar-default {
background-color:red;
}
This should get you going.
This CSS works on firefox and chrome, but for some weird reason it wont work on IE =(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>I hate u, ie :p</title>
<style>
header>nav, main, footer>nav {
max-width: 500px;
padding: 0em;
margin: 0em auto;
}
header, footer { min-width: 100%; background-color: #c0c0c0;}
main { background-color: yellow; }
main>section, main>aside { display: inline-block; }
main>section { background-color: aqua; }
main>aside { background-color: pink; }
</style>
</head>
<body>
<header>
<nav>
<ul><li>Header is centered =)</li></ul>
</nav>
<nav>
<ul><li>Header (nemu 2) is centered =)</li></ul>
</nav>
</header>
<main>
<section>
<h1>Why IE won't center me?</h1>
</section>
<aside>
<p>Stackoverflow: please help me</p>
</aside>
</main>
<footer>
<nav>
<ul><li>Footer is centered =)</li></ul>
</nav>
</footer>
</body>
</html>
I'd appreciate it if you help me fix this, preferably without adding/removing elements. I'd like to keep the current semantic if possible. If not, o well...
It is worth to mention that if I do something like <main><div>...</div></main> and add main>div { margin: 0em auto;} IE (and all other browsers, as expected) center main's content. But like I mentioned, I'd like to not break the semantics.
IE does not support the main element. To get it to work, however, you can just set main { display:block; } and it will work. This is a similar fix to the other new HTML5 elements, such as section and nav, which weren't supported but could be added by just adding that CSS.
As I don't have enough reputation, I post my idea as an answer:
My guess is, that you have to add position: relative; for your .main.
Browsers have a default.css with default values for keys you didn't set. I think (but didn't check) the IE has different std-values than other browsers. That could cause problems.
The main element is not supported in IE:
MDN
caniuse
Which I believe means there is no default styling for the main element, so you will have to add it. Most reset stylesheets will do this for you for the newer, more semantic elements.
Add display: block to your CSS selector for main and it should work.
main {
display: block;
max-width: 500px;
margin: 0 auto;
}
I have a textarea that aligns perfectly to the left on firefox, but on chrome, a little space is added. I don't know why it's there, but I tried a lot of things to get rid of the space but just can't.
Chrome pushes the textarea like 2 pixels to the right. Does anyone know what I'm doing wrong, or is there a way to align it on chrome?
Here's my code:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="testdiv.css" />
</head>
<body>
<div class="outermostshell">
<div class="textareashell">
<textarea name="status" rows="2" cols="30"></textarea>
</div>
</div>
</body>
</html>
CSS:
.outermostshell
{
position:fixed;
width:300px;
height:600px;
background-color:red;
}
.textareashell
{
position:relative;
top:10px;
padding:0;
border:0;
left:0px;
margin:0px;
}
Any help would be greatly appreciated.
Some browsers (including Chrome) have a default margin for form elements. Just set the margin to zero:
.textareashell textarea { margin: 0; }
I prefer to use padding-left: 2px;
yesterday i just developed magento website but i have problem with how to fix banner overlaps because this DIV just overlaps the menu...i try to seperate and use ie7 stylesheet but nothing happen.. :(
http://thaiamuletstore.com/main1/index.php/
try to hover menu --> STORE-> Amulet Types->Great Jatukham
ie7.css
#charset "utf-8";
/* CSS Document */
#example-one .nav { overflow: hidden; margin: 0 0 0 0; background:url(../images/tab-border.gif) repeat-x 80px; height:87px; }
.block-subscribe { padding-left: 15px!important; padding-right:15px; margin-top:20px;}
.nav-container { float:left; }
.mw_footer { clear:both!important; }
.account-login .col2-set .registered-users { width:435px; }
.account-login .col2-set .new-users { width:430px; }
.account-create .buttons-set { width:550px; }
.block-subscribe { padding-left:5px!important ; height:127px; padding-bottom:0px!important }
.block-content .newsbut { height:21px!important; }
ul li ul li ul li a.level1 { zoom:1; } <-- i try control with this
There are a couple of options.
The easiest, if possible, is to place your menu at the bottom of the page and then move it up via absolute positioning. This is because IE sucks at z-index and the easiest way to trick it is to have the html code generate as the last item (placing it on top of all other html).
This will however not work with Flash, silverlight or java-applets which will still sneak on top.
Alternatively you can (however i like the first option more) place an IFRAME under your menu filling out the area you want it to cover. This "fixes" most of IE's whacky ideas about positional elements. But like i said, if you can move your menu to the bottom of the html page, then that is your best bet.