I have this working fine on IE 9, Firefox 21.0 but not on Chrome Version 28.0.1500.95. How can I get this working across other browsers?
I have the following as my HTML and CSS.
<div class="footer">
<div class="contact">
<ul>
<li >Contact</li>
<li >Site Map<div ></div></li>
<li >Legal</li>
<li >Privacy Statement</li>
<li >Send Feedback</li>
</ul>
</div>
<div class="clear"></div>
<div class="copyright">© 2013 Hygeia Group. All Rights Reserved.</div>
<!-- <br clear="all"/>-->
<div class="social">
<ul>
<li>Tweeter<div class="separator"></div></li>
<li>Youtube<div class="separator"></div></li>
<li>FaceBook<div class="separator"></div></li>
<li>LinkedIn<div class="separator"></div></li>
</ul>
</div>
</div>
.footer {
height:40px;
font-size:11px;
bottom:0px;
}
.footer ul{
margin-left:24.95%;
list-style:none;
list-style-type:none;
list-style-image:none;
list-style-image:url("../images/separator.png");
z-index:50000;
list-style:none;
}
.footer ul li{
padding:0 5px 0 0px;
margin-right:15px;
list-style:none;
list-style-type:none;
list-style-image:none;
float:left;
list-style-image:url("../images/separator.png");
text-align: center;
}
.footer ul li > a{
text-decoration:none;
color:#666;
padding:0px 2px;
}
.footer ul li:first-child {
list-style-image:none
}
Just fyi: if you misname a .png as .jpg (or vice versa), some browsers won't load it.
I'm seeing it fine in Chrome 28.0.1500.95 when I use jsfiddle.net for testing. Try using that site to create a page we can all see.
I supplied a 'separator' image I had lying around -- I assume that it's not something odd about your .png file, and that it displays correctly when you load it directly?
Related
I made my website as responsive as possible(don't wanna know something about bootstrap). The only thing that doesn't stay in its place (which needs to stay in the middle). Here is my code:
#header {
position:fixed;
display:block;
width:100%;
top:0;
left:0;
padding-left:0vmax;
padding-right:5vmax;
z-index:99999;
height:8vmax;
max-height:8vmax;
transition: .3s linear;
box-sizing:border-box;
background-color: rgba(243,243,243,1.00);
}
#menuwrapper {
display:block;
float:right;
width:55vmax;
margin-top:0.35vmax;
margin-right:17vmax;
height:8vmax;
max-height:8vmax;
overflow:hidden;
box-sizing:border-box;
position:relative;
}
#menu {position:absolute;height:100%;width:100%;display:table;padding: 2.5vmax; word-wrap:break-word;}
#menu ul {word-spacing:2vmax;font-size:1.35vmax;padding:0;padding-bottom:0vmax;margin: 0 1vmax;}
#menu li {display:inline-block;padding: 0vmax;}
.rechts {display: table-cell;width: 1px;vertical-align: middle;white-space: nowrap;}
#menu ul li a {height:8vmax;text-decoration:none;color:grey;transition: color .45s ease-in-out;margin-right:7.5vmax;}
#menu ul li a:hover {color:#3f92c3;}
<div id="header">
<div id="menuwrapper">
<div id="menu">
<ul class="pad">
</ul>
<ul class="rechts">
<li><a class="a1" id="page1" href="javascript:;">Services</a></li>
<li><a class="a1" id="page2" href="javascript:;">Portfolio</a></li>
<li><a class="a1" id="page3" href="javascript:;">Contact</a></li>
</ul>
</div>
</div>
</div>
I made a jsfiddle but i can't see that it goes to much to the left like i saw on a tablet.
It is a tablet of work and it has long height. On my website it's better noticable My website If i change the height inside the desktop version. Then you see that the menu goes left and the first menu word disappears.
Is there a way to fix this?
You're overriding default properties without reason.
I tried to clean your css code a little bit, deleting what's not necessary.
I think now works as you expect, if not, specify a little bit more and i'll edit the code to help you understand how to do what you need.
#header {
position:fixed;
display:block;
width:100%;
top:0;
left:0;
padding-left:0vmax;
padding-right:5vmax;
z-index:99999;
height:8vmax;
max-height:8vmax;
transition: .3s linear;
box-sizing:border-box;
background-color: rgba(243,243,243,1.00);
}
#menuwrapper {
display:block;
float:right;
margin-top:0.35vmax;
margin-right:17vmax;
height:8vmax;
max-height:8vmax;
overflow:hidden;
box-sizing:border-box;
position:relative;
}
#menu {padding: 2.5vmax; word-wrap:break-word;}
#menu ul {word-spacing:2vmax;font-size:1.35vmax;padding:0;padding-bottom:0vmax;margin: 0 1vmax;}
#menu li {display:inline-block;padding: 0vmax;}
.rechts {vertical-align: middle; white-space: nowrap;}
#menu ul li a {height:8vmax;text-decoration:none;color:grey;transition: color .45s ease-in-out;margin-right:7.5vmax;}
#menu ul li a:hover {color:#3f92c3;}
<div id="header">
<div id="menuwrapper">
<div id="menu">
<ul class="pad">
</ul>
<ul class="rechts">
<li><a class="a1" id="page1" href="javascript:;">Services</a></li>
<li><a class="a1" id="page2" href="javascript:;">Portfolio</a></li>
<li><a class="a1" id="page3" href="javascript:;">Contact</a></li>
</ul>
</div>
</div>
</div>
The website I'm developing has a horizontal scroll bar and I'm not sure why.
Fiddle
HTML
<body>
<div id="header">
<div id="logoHolder">
Logo
</div>
<div id="loginHolder">
Login
</div>
<div class="container_12">
<div class="grid_12">
<div id="navigationHolder">
<ul id="navigation">
<li>GuidedChoice</li>
<li>Pricing</li>
<li>FAQs</li>
<li>Investment Tools</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
body {
}
/*Header*/
#logoHolder{
width:20px;
background-color:green;
float:left;
}
#loginHolder{
width:20px;
background-color:green;
float:right;
}
#navigationHolder{
display:block;
margin-left:auto;
margin-right:auto;
width:775px;
background-color:brown;
height:auto;
}
/*Navigation*/
#navigation{
list-style:none;
font-family:Arial;
font-size:1.3em;
}
#navigation li{
float:left;
display:block;
}
#navigation li a{
color:inherit;
text-decoration:none;
display:block;
text-align:center;
padding:1.25em;
}
#navigation li a:hover{
background:#609941;
text-decoration:underline;
}
I'm using the 960 gridsystem as well.
Example
It is #loginHolder
You can either take away width:20px; or give it a margin-right:20px; and it will go.
You ought to be using the development tools that are built into browsers these days. Firefox and Chrome both have features that can be accessed by pressing F11. There is also Firebug for firefox.
Any of these will go into an 'inspect elements' mode where you can hover over your page and identify where your elements sit and exactly how big they are, even when they are filled with whitespace.
These tools also let you experimentally edit css directly in situ, so you can find a better way to style the elements the way you intended them to work.
Also Chris Pederick's Web Developer Toolbar has proven to be a useful development tool.
Im working on responsive code just now and for some reason i cant get 2 lists to display in the center of the div that's 100% width for mobile view. Is there something that im missing out in the css code below that might be causing this to not to display centered?
both lists have classes of .social-media and .top-nav
*** HTML ******
<div id="gezzamondo">
<div class="header">
<img class="logo" src="images/gezzamondo-logo.jpg" alt="Web designer Glasgow | Gezzamondo" title="Web designer Glasgow | Gezzamondo" />
<ul class="top-nav">
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div><!-- close header -->
</div><!-- close gezzamondo -->
** CSS ****
body {
background-color:#C09;
font-family: 'Ubuntu', sans-serif;
margin:0;
padding:0;
}
img{
max-width:100%:
}
#gezzamondo{
width:100%;
margin:0 auto;
}
.header{
background-color:#FFF;
height:215px;
width:100%;
text-align:center;
}
#gezzamondo .logo{
width:183px;
height:83px;
margin:0 auto;
margin-top:20px;
}
#gezzamondo .top-nav{
list-style: none;
font-size:20px;
font-weight:300;
margin:0 auto;
}
#gezzamondo ul.top-nav li{
float:left;
margin-right:30px;
}
#gezzamondo ul.top-nav li a{
text-decoration:none;
color:#333333;
}
#gezzamondo .social-media{
position: absolute;
list-style: none;
width:162px;
margin:0 auto;
background-color:#06F;
}
#gezzamondo .social-media li img{
height:44px;
width:44px;
}
#gezzamondo .social-media li{
float:left;
margin-right:15px;
}
#gezzamondo .social-media li.last{
float:left;
margin-right:0px;
}
#gezzamondo ul.top-nav li a:hover{
border-bottom:7px #FF0099 solid;
color:#333333;
}
you are setting the position to absolute in #gezzamondo .social-media, just remove the position and it should center.
I've used the code you supplied, it looks a mess to in jsfiddle (example code is not complete etc). I think this should do it for you, or at least get you closer. What I did was basically wrap the social ul in two divs. center-social spans the full width and center-s trys to provide an idea of a width so the uls can be centered. Try it out on your actual page and it should display correctly. It's only applied on the social ul in the example.
<div id="center-social">
<div id="center-s">
<ul class="social-media">
<li><img src="images/twitter-social.jpg" alt="Gezzamondo on Twitter" title-"Gezzamondo on Twitter"/></li>
<li><img src="images/behance-social.jpg" alt="Gezzamondo on Behance" title="Gezzamondo on Behance"/></li>
<li class="last"><img src="images/dribbble-social.jpg" alt="Gezzamondo on Dribbble" title="Gezzamondo on Dribbble"/></li>
</ul>
</div>
</div>
I am trying to build a simple CSS only navigation bar for my site. This is it working fine in modern browsers:
And this is my CSS:
#nav{
width:496px;
height:45px;
float:right;
background-color:#bee199;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin-top:5px;
border:1px solid #a09f9f;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#nav ul{
list-style:none;
text-align:center;
}
#nav ul .last{
padding-right:0px;
border-right:none;
}
#nav ul li.navsep{
width:1px;
height:44px;
background-color:#a09f9f;
padding:0;
margin-right:10px;
}
#nav ul li{
width:auto;
height:44px;
display: -moz-inline-stack;
display:inline-block;
padding-right:10px;
margin-bottom:-16px;
}
#nav ul li a{
font-family:Helvetica, Arial, sans-serif;
font-size:20px;
font-weight:400;
text-decoration:none;
color:#434342;
}
HTML:
<div id="nav">
<ul>
<li>Principles</li>
<li class="navsep"><span></span></li>
<li>Our services</li>
<li class="navsep"><span></span></li>
<li>Recent work</li>
<li class="navsep"><span></span></li>
<li class="last">Contact</li>
</ul>
</div>
One of my problems is using negative margins, I really don't want to be using them. But every time I try to use conventional methods the text will not center vertically and it looks like this:
This also happens on older browsers.
Thanks for your time! If you need more information just ask! :)
Omit the <li class="navsep"> and use borders instead.
use lineheight on the li elements.
Instead of using negative margin use line-height, in your case #nav ul li {height: 44px; line-height: 44px;} this will vertical center your text
I m having trouble with some code and the ie7 browser, its a vertical CATEGORY menu made with the ul tag, and css properties. Works fine with safari, ie8, firefox 3.5 and 3.6 but with ie7 A BIG LEFT MARGIN IS BEING CREATED This is the code that is being generated by the server:
<div id="menu">
<ul><li><a class="level1" href="catalog.html?category=21">PRODUCTOS</a></li>
<li><a class="level1" href="catalog.html?category=21">Daniela Kosan</a></li>
<li><a class="level2" href="catalog.html?category=21">Lo Nuevo</a></li>
<li><a class="level2" href="catalog.html?category=22">Fragancias</a></li>
<li><a class="level2" href="catalog.html?category=23">Rostro</a></li>
<li><a class="level2" href="catalog.html?category=24">Accesorios</a></li></ul>
</div>
and this is the css i'm using:
*{
margin-top:0;
padding:0;
}
#menu{
background:#fff;
width:205px;
padding-left:9px;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
}
#menu li a{
list-style:none;
font-family: arial, sans-serif;
background:#F0CFD6;
color:#944862;
text-transform:none;
font-size:14px;
font-weight:normal;
text-decoration:none;
display:block;
}
#menu li a:hover{
color:#fff;
text-decoration:none;
}
#menu li a.level1{
padding-left:10px;
padding-top:10px;
width:205px;
height:20px;
color:#fff;
background:#DA8298;
}
#menu li a:hover.level1{
color:#000;
}
#menu li a.level2{
padding-left:20px;
padding-top:12px;
width:205px;
height:20px;
color:#8B5169;
border-width:0 0px 0px 0px;
background:#F0CFD6;
border-bottom:1px dashed #CEABB2;
}
#menu li a:hover.level2{
color:#000;
}
Here is the bad render, NOTE THE BIG LEFT MARGIN BESIDES THE CATEGORY MENU
This is how it renders on the other browsers... good! Thank you guys!
Try setting the margin and padding on the ul. Different browser will automatically set it to different things. I suggest using a CSS reset in the future.
#menu ul {
margin-left: 0px;
padding-left: 0px;
}
Try the above and let me know if it works. I don't have IE, so I can't test it. I'd test the margin and padding one at a time to see if only one of them is the culprit.