Having a headache with IE. I have an image (24x24) which I'd like to display inline beside my username at the top navigation bar after logging in. It shows nicely in firefox, chrome. problem with IE version 7. The img breaks to another line, and other sibling items in the float back left.
CSS below:
#nav {
background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
height:35px;
line-height:35px;
}
#nav .menuitem{
padding: 0 7px;
cursor: pointer;
font-size: 11px;
float:left;
}
#nav .menuitem, #nav .menuitem a {
color:#CCCCCC;
}
#nav .menuitem:hover {
background-color:#333333;
}
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
float: right;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
}
#nav .right {
float:right;
}
I have tried many variations but can't seem to fix the problem. I have also tried variations of the css below, but the image still doesn't show nicely inline.
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
float: right;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
display:inline;
position:relative;
top: 0px;
line-height: 35px;
}
The HTML code as follows
<span class="menuitem right">Welcome, <a id="profile" href="http://localhost/usercp">user<img src="avatar24x24.jpg"></a></span>
I altered the css and html source. I only have IE6 to work with, but it looks consistent in Chrome and IE6. Try this:
http://work.arounds.org/sandbox/38/run
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
* { margin:0; padding:0; }
#nav {
background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
height:35px;
line-height:35px;
}
#nav .menuitem{
padding: 0 7px;
cursor: pointer;
font-size: 11px;
float:left;
}
#nav .menuitem, #nav .menuitem a {
color:#CCCCCC;
}
#nav .menuitem:hover {
background-color:#333333;
}
#nav .menuitem img {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #111;
display:inline-block;
margin-top: 4px;
margin-left: 7px;
height:24px;
width:24px;
}
#nav a { display:inline-block; vertical-align:top; }
.lol { display:inline-block; }
#nav .right {
float:right;
}
</style>
<!--[if lt IE 8]>
<style>
#nav .menuitem a { display:inline; zoom:1; }
#nav .menuitem img { display:inline; zoom:1; border:1px solid red; vertical-align:top; }
</style>
<![endif]-->
</head>
<body>
<div id="nav">
<div class="right menuitem">
<span class="lol">Welcome,</span> <a id="profile" href="http://localhost/usercp">user</a> <a id="profile-img" href="http://localhost/usercp"><img src="http://cdn1.sbnation.com/profile_images/273745/battle_scars_fedor_emelianenko_by_wildestdreamz_small.jpg"></a>
</div>
</div>
</body>
</html>
This snippet suffered from the float:right width calculation bug and I had to use inline-block workaround to get it to work right.
Use a background image instead, like this:
<a style="background-image: url(avatar24x24.jpg);
background-repeat: no-repeat;
background-position: right center; padding-right: 30px;"
id="profile" href="http://localhost/usercp">user</a>
Should position it pretty well, tested it in Opera, IE8 compatability mode and Firefox. To display the entire image, tune the height of the elements around it.
You can use background-position to move the image around inside the surrounding element, there's more information on this at w3schools.com.
Alternatively, you can use margin to get more spacing (margin will create spacing that includes the background image).
Related
I am trying simply to center text horizontally in a form as follows:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="contact-form">
<head-black>STEWARD'S WEEKLY REPORT</head-black><br>
</div>
</html>
contents of style.css:
#contact-form {
background-color:#F2F7F9;
width:925px;
padding:10px;
margin: 10px auto;
border: 6px solid #8FB5C1;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:15px;
position:relative;
}
#contact-form head-black {
display:inline-block;
font-size:14px;
text-decoration:underline;
text-align:center;
}
The text stays left aligned.
<head-black> is non-standard HTML syntax. Use of custom tags should be avoided. Instead, use:
<h1 class="head-black">STEWARD'S WEEKLY REPORT</h1>
and CSS:
#contact-form {
background-color:#F2F7F9;
width:925px;
padding:10px;
margin: 10px auto;
border: 6px solid #8FB5C1;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:15px;
position:relative;
text-align:center; /* put this here */
}
#contact-form .head-black {
display:inline-block;
font-size:14px;
text-decoration:underline;
}
jsfiddle
Edit
If you'd like to center only the <h1>, simply set it to display: block, and set the text-align: center in the h1 tag. Don't forget to remove the text-align: center from the #content-form CSS block. Do the following to the .head-black CSS:
#contact-form .head-black {
display:block;
font-size:14px;
text-decoration:underline;
text-align: center;
}
The jsfiddle above shows the new changes.
I'm having some issues trying to style a menu in chrome. The menu looks fine in ltr mode, but in right to left mode it breaks in Chrome.
I have a fiddle of this here:
http://jsfiddle.net/YKger/
In firefox, the menu in ltr is "one - two - three", in rtl "three - two -one". It chrome it is always rendered as "one-two-three".
Any idea why this is happening, or how I can style this without the first 'li' spanning the whole menu?
Thanks,
Also, here's the code:
<!doctype html>
<head>
<style>
.navigation { float:right; }
ul#main-menu {
list-style-type: none;
direction:rtl;
}
li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}
ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}
ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}
ul.inline li {
display:inline;
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="main-menu" class="links inline clearfix main-menu">
<li class="menu-1501 first">One<span id='tail1'> </span>
<span id='tail2'></span></li>
<li class="menu-1014">Two<span id='tail1'></span><span id='tail2'></span></li>
<li class="menu-1759 active-trail last active">Three<span id='tail1'></span><span id='tail2'></span></li>
</ul>
</nav>
</body>
</html>
i think thats the easy way -
you should make both of your:
ul, li
{
direction:rtl;
}
Try this:
.navigation { float:right; }
ul#main-menu {
list-style-type: none;
direction:rtl;
}
li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}
ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}
ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}
ul.inline li {
display:inline-block;
}
I have created a menu but cannot solve this issue so I am hoping that someone can help me:(
Problem my last li (anchor tag) inside my menu keeps collapsing underneath my menu and no matter I do problem persists. In Firefox looks fine but in every other browser it is a disaster... I have tried: adding overflow:hidden; to my menuwrapper,tried adding a "clear both" div after last ul tag,added display:inline-block to li tags,and a lot of other approaches to my problem but nothing works:( I didn't set explicit width to my anchor tags (I really don't want to do that!). In Firefox looks like perfect: http://robertpeic.com/kyani/template/menu.png
in other browsers look like this: (notice that there is no blue button because it came bellow my menu) http://robertpeic.com/kyani/template/menu2.png
I dont want this:http://robertpeic.com/kyani/template/menu3.png
Question: How can I prevent my li's from going below my menu even if there is no room? Thanks for your help!!
Link to my menu
Relevant CSS looks like this:
.mainmenu{
display:block;
width:906px;
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.mainHover{
background-image:url('http://robertpeic.com/kyani/template/hoverm.png');
display:block;
position:relative;
background-repeat:repeat-x;
z-index:-50;
}
Html looks like:
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
I added overflow:hidden to .mainmenu and changed the padding for .mainmenu ul li a and it worked for me.
.mainmenu
overflow:hidden;
.mainmenu ul li a
padding:0 22px 0 23px;
I have found that the best way to get a consistent full width menu bar with cross browser compatibility is to force the widths of the LIs. Although it isn't a very forward compatible. it is the best way I have found for maintaining the integrity of the visual design.
Set the width of the mainmenu div to 910px. It will solve your problem and also not show any white spacing
Your entire html will be, as given below. While testing your code,I found, if I omit the first line DocType... the menu gets mangled in IE . In Chrome it works fine. So AFAIK, Your issue was with Doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.mainmenu
{
display: block;
width: 906px;
margin: 0px auto;
height: 42px;
background-image: url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat: repeat-x;
position: relative;
margin-top: -15px;
z-index: 160;
}
.mainmenu ul
{
list-style-type: none;
}
.mainmenu ul li
{
float: left;
}
.mainmenu ul li a
{
text-decoration: none;
display: block;
font-family: "Palatino Linotype" , "Book Antiqua" ,Palatino,FreeSerif,serif;
font-size: 20px;
padding: 0 20px ;
color: #383838;
border-left: 1px solid #dedede;
height: 42px;
line-height: 42px;
z-index: 100;
}
.mainmenu ul li a:hover
{
color: #ffffff;
}
.mainHover
{
background-image: url('http://robertpeic.com/kyani/template/hoverm.png');
display: block;
position: relative;
background-repeat: repeat-x;
z-index: -50;
}
</style>
</head>
<body>
<div class="mainmenu">
<ul>
<li>Pocetna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div>
</body>
</html>
I feel so dumb right now :) To prevent my li from going below I've only wrapped my menu with other div and set that div to overflow hidden and it worked perfect! THX everybody for your help!!!
CSS now looks like:
.mainmenu{
display:block;
width:903px;
}
.mainmenu ul{
list-style-type:none;
}
.mainmenu ul li {
float:left;
}
.mainmenu ul li a{
text-decoration:none;
display:block;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
font-size:20px;
padding:0 23px 0 23px;
color:#383838;
border-left:1px solid #dedede;
height:42px;
line-height:42px;
z-index:100;
}
.mainmenu ul li a:hover{
color:#ffffff;
}
.menuwrap{
margin:0px auto;
height:42px;
background-image:url('http://robertpeic.com/kyani/template/mainmenubg.jpg');
background-repeat:repeat-x;
position:relative;
margin-top:-15px;
z-index:160;
width:900px;
overflow:hidden;
}
HTML looks like this:
<div class="menwrap">
<div class="mainmenu">
<ul>
<li>Početna</li>
<li>Kyäni</li>
<li>Trokut zdravlja</li>
<li>Poslovna prilika</li>
<li>Info predavanja</li>
<li>Kontakt</li>
</ul>
</div><!--/mainmenu-->
</div><!--/menuwrap-->
I'm wondering if anyone can help me to sort out why my navigation menu appears to be in my main div, when it's not coded that way. I'm guessing the CSS is the problem. Lots of code I'm afraid, but I don't know where the problem is, so I can't isolate it....
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>My Approach</li>
<li>Testimonials</li>
<li>Fees</li>
<li>Contact</li>
</ul>
</div><!--holder(navbar)-->
</div><!--navbar-->
<div id="main">main</div><!--main-->
</div><!--container-->
<body>
</html>
CSS:
body {
background-image: url(images/colorful7.jpg);
}
#container {
width: 960px;
float: none;
margin: auto;
height: auto;
}
#header {
height: 350px;
width: 940px;
padding: 10px;
}
#navbar {
background: none;
height:40px;/*40*/
width:960px;
float:right;
}
#navbar #holder {
height:40px;
width:725px;/*725*/
float: right;
}
#navbar #holder ul {
list-style:none;
margin:0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float:left;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:600;
color:#660033;
border-bottom:none;
padding:10px;
width:120px;
text-align:center;
display:block;
background:#FFC;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
margin-left: 5px;
}
#navbar #holder ul li a:hover {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink:hover {
background:#660033;
color:#white;
text-shadow:1px 1px 1px #000;
}
#main{
background-color: #FFC;
height: 400px;
width: 960px;
padding: 10;
}
Here's a live jsFiddle
Add
clear: both;
to the #main-Rule to clear the floating after the nav bar. Fiddle: http://jsfiddle.net/GGSk2/2/
If you think that the problem lies in the CSS, try to deactivate the css and see what happens. You can track down the faulty bit by adding back the css piece after piece.
I usually use Firefox with Firebug to help me find out such problems. It allows you to deactivate or modify CSS and HTML on the fly. IE and safari allows it as well I reckon.
delete float:right; from #navbar
#navbar {
background: none;
height:40px;/*40*/
width:960px;
}
http://jsfiddle.net/G26TD/10/
I have made changes to CSS & its working
Working fiddle: http://jsfiddle.net/G26TD/11/
Don't use ID inside a id to style its will slow down CSS
Here is a post how to write css efficiently: https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS
I am trying to something pretty simple.
I have two buttons inside a div. One needs to be float right, one needs to be float left
<div class="btnwrapper">
<div class="btnright"><span>Continue</span></div>
<div class="btnleft"><span>Back</span></div>
<div style="clear:both;"></div>
</div>
And the corresponding CSS
.calculator .btnwrapper { width:607px; }
.calculator .btnleft { float:left; border:1px solid green; }
.calculator .btnright { float:right; border:1px solid red; }
a.button { background:url(../images/bg-button-left.gif) no-repeat; float:right; height:29px; width:auto; padding:0 0 0 8px; display:block; color:#FFF; text-decoration:none; font-weight:bold; font-size:13px; cursor:pointer;}
a.button span { background:url(../images/bg-button-right.gif) top right; height:16px; padding:8px 8px 5px 0px; display:block; width:auto; cursor:pointer; }
Here is the results I'm getting in IE7. All other modern browsers handle this correctly.
Remove float: right from a.button.
With it: http://jsfiddle.net/K8XQr/
Without it: http://jsfiddle.net/K8XQr/1/
They look identical, except that losing float: right fixes it in IE7.