My navigation bar is off in Firefox and Opera. There is noticeably more padding below the text than above. I've changed my code so many different times trying to fix this, so I apologize if there are errors in my current code. It looks fine in Safari and Chrome. Can anyone help find my error(s)?
CSS:
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
margin-bottom: 50px;
}
li {
display: inline;
margin:0;
padding:0;
}
a.one:link,a.one:visited {
font-size: 18px;
line-height: 18px;
font-weight: bold;
background-color: red;
color: white;
font-family: Helvetica,Arial,san-serif;
text-align: center;
padding: 5px 7px;
text-transform: uppercase;
text-shadow: 0.05em 0.05em 0.1em #333;
letter-spacing: 1px;
}
HTML:
<nav>
<ul>
<li><a class=one href=index.html>home</a></li>
<li><a class=one href=bio.html>bio</a></li>
<li><a class=one href=news.html>news</a></li>
<li><a class=one href=disc.html>discography</a></li>
<li><a class=one href=contact.html>contact</a></li>
</ul>
</nav>
Thanks!
There is noticeably more padding below the text than above.
Here is the issue:
Since margin:0; and margin-bottom: 50px is set, the above/below ratio is 0px/50px
It looks fine in Safari and Chrome
Compare the default stylesheets:
WebCore(Safari): html.css
Mozilla(Firefox): html.css
Blink(Chromium/Opera): html.css
Internet Explorer User Agent Style Sheets
And lookup the vendor extensions:
Mozilla CSS Extensions: -moz-padding-start
Related
The below flexbox code doesn't work in firefox. It's a horizontal nav list that stretches across the browser width. In all other browsers the li's space out equally, but in firefox they don't. Any ideas? Thanks in advance.
.wrapper {
position: fixed;
padding: 0;
width: 100%;
top: 0em;
}
.flex-container-top {
padding: 1em;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-item {
font-family: sans-serif;
font-size: 1em;
color: #fff;
text-align: center;
}
<div class="wrapper">
<ul class="flex-container-top">
<li class="flex-item">Link 1
</li>
<li class="flex-item">Link 2
</li>
<li class="flex-item">Link 3
</li>
<li class="flex-item">Link 4
</li>
</ul>
</div>
Your example didn't work in Chrome, either.
You need to add flex: 1 to .flex-item. Then it will work:
.flex-item {
flex: 1; /* add this line */
font-family: sans-serif;
font-size: 1em;
color: #fff;
text-align: center;
}
I'm trying to make my first website in Dreamweaver, and I've run into a problem I can't seem to fix. I have a div containing an unsorted list, and the elements of the list are rollover images. There are 5 images, so I have 3 on the first line and 2 on the second line. They are sized to be a certain percentage of the page.
I want the div to extend down to the end of the bottom row of images automatically, I do not want to have to hard code the value for the size. I have the div size set to auto, but it does not seem to recognize the images in the unsorted list. It is sizing its self to 0, so all the images are overlaying everything that comes after the div.
If I manually resize the div it fixes the problem, but I'm not sure I want to do this.
Is there anyway to fix this issue without hard coding the height of the div?
Here is the html code for the list of roll over images..
<div id="rolloverlocs">
<ul>
<li><img src="images/Davie.jpg" alt="" width="" height="" id="Image1"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image2"></li>
<li><img src="images/Denman.jpg" alt="" id="Image3"></li>
<li><img src="images/Kits.jpg" alt="" width="" height="" id="Image4"></li>
<li><img src="images/Denman.jpg" alt="" width="" height="" id="Image5"></li>
</ul></div>
And for this part of the css style sheet ..
#rolloverlocs ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: auto;
display: block;
}
#rolloverlocs img {
width: 31%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
float: left;
border-style: solid;
border-color: #000000;
background-color: #E5E9E2;
height: auto;
}
#rolloverlocs {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: auto;
}
try add this style:
#rolloverlocs ul {
overflow:hidden;
}
demo
or you can use this:
html,body{
width:100%;
}
*{
margin:0;
padding:0;
}
#rolloverlocs ul {
list-style: none;
width: 100%;
display: block;
overflow:hidden;
}
#rolloverlocs li{
display:block;
float:left;
width:33%;
}
#rolloverlocs a{
display:block;
width:100%;
height:auto;
}
#rolloverlocs img {
width:94%;
margin:1%;
display: block;
background-color: #E5E9E2;
height: auto;
padding:2%;
}
#rolloverlocs {
width:100%;
}
I'm working on my first website (I'm a n00b) and on Safari and Chrome it looks exactly the way I want. However, in IE 8 the nav bar does not work at all. In Firefox, once you hover over one of the links it brings the drop down box down but it adds an extra pixel in between the main nav bar and the sub links.
My website's URL is: http://tonerleague.x10.mx/basketball.html
My HTML is...:
<div class="menu">
<nav>
<ul>
<li>Main
<ul>
<li>Advertise</li>
</ul>
</li>
<li>Test
<ul>
<li>Test</li>
<li>TestTest</li>
<li>TestTestTest</li>
</ul>
</li>
<li>Unknown
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</li>
<li>Support</li>
<li>Forums</li>
</ul>
</nav>
</div>
My CSS is..:
.menu
{
left: 50%;
position: absolute;
top: 137px;
margin-left:-500px;
font-family:"Arial", Helvetica, sans-serif;
font-size: .875em;
font-weight: bold;
}
nav ul {
padding: 0;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover {
/*background:#C0C0C0; ** Firefox causes another extra pixel when activated*/
line-height: normal;
-moz-border-radius: 0;
}
nav ul li:hover a {
color: #FFF;
}
nav ul li a {
display: block; padding: 5px 35px;
color: #FFF; text-decoration: none;
border-right: 0px solid #FFF;
-moz-border-radius: 0;
}
nav ul ul {
background-color: #C0C0C0; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li {
float: none;
border-top: 0px solid #FFF;
border-bottom: 0px solid #000;
border-right: 0px solid #000;
border-left: 0px solid #000;
position: relative;
line-height: normal;
-moz-border-radius: 0;
}
nav ul ul li a {
padding: 5px 15px;
color: #fff;
}
nav ul ul li a:hover {
background-color: #000000;
}
SELECT boxes are not typical HTML elements. They're closely tied to the OS and can be difficult to style, especially on IE8.
You may opt to wrap the SELECT in a DIV and set the overflow to contain the element, or use an IE8-speficic CSS declaration to tweak the size.
See: How does one target IE7 and IE8 with valid CSS?
Use "\9" to target IE8 and below.
Use "*" to target IE7 and below.
Use "_" to target IE6.
Example:
body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
I have a website I'm working on and I'm positive it is something obvious that I'm overlooking here.
My main issue and why I'm here: My page looks great in Chrome and Safari, but FF v.21 (Mac) takes the textcont and linkcont layers and puts them all the way to the right, outside of the container I have for them. I know they are floating, but I can't seem to get them to show correctly there.
*EDIT: 6-18 # 1p--*I solved the other issue, but Firefox still is putting the two inner containers OUTSIDE of the main content container.
*EDIT: 6-20 # 9:45a--*I found that if I added "Position: absolute;" to the #contentbox, everything seemed to work in Chrome, Safari, and Firefox (can't test it on IE currently), BUT my #copybox div (last layer that displays the year with copyright at the very bottom) would align overtop of the #contentbox at the top. I tried using absolute position on that div, but just made it visible, relative made it hidden--but still up top where it shouldn't be. Any ideas? If I can get the absolute positioning to work on the content, I just need a fix to keep the #copybox following the end of the #contentbox layer.
Firefox Screenshot: http://i41.tinypic.com/20t0xh0.png
Chrome/Safari (correct): http://i40.tinypic.com/a4y1ar.png
Style Code:
#charset "UTF-8";
/* CSS Document */
body {
background-color: #FAD434;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
}
#container {
width: 100%;
padding: 0px;
margin: 0 auto;
}
#headercont {
width: 900px;
margin: 0 auto;
}
#header {
width: 100%;
height: 65px;
margin: 0 auto;
background-color: #000000;
background-image:url(img/logo.png);
background-repeat: no-repeat;
background-position: left;
border-bottom: 2px solid #fad434;
}
#picheader {
height: 360px;
background-image:url(img/NHYC_BoySmile.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#contentbox {
width: 100%;
background-image: url(img/content_bkgd.jpg);
background-position: bottom center;
background-repeat: repeat-x;
background-color: #ffffff;
margin-top: 0px;
padding-bottom: 50px;
}
#contentcont {
width: 900px;
margin: 0 auto;
overflow: auto;
}
#textcont {
width: 70%;
padding: 0px 0px 25px 10px;
float: left;
}
#linkcont{
width: 25%;
padding-top: 63px;
padding-right: 10px;
padding-left: 10px;
float: right;
}
#copybox {
width: 100%;
font-size: 10px;
text-align: center;
padding: 15px;
}
/* --- HEADER TEXT --- */
h1 {
font-size: 40pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h2 {
font-size: 24 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h3 {
font-size: 18 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
/* --- LINK LIST --- */
.links li {
list-style-type:none;
line-height: 20pt;
}
/* --- MENU --- */
#menu {
width: 100%;
margin: 0 auto;
padding-top: 325px;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
#menu ul li{
padding: 10px 25px;
position: relative;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-transform: uppercase;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #f28c3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Index.php Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NHYC - Ohio</title>
<link href="nhyc_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="headercont">
<div id="header">
<p align="right"><img src="img/socialmedia_icons.png" alt="Social Media" border="0" usemap="#socialmedia" style="padding-right:15px; padding-top: 18px;"/>
<map name="socialmedia" id="socialmedia">
<area shape="rect" coords="2,4,27,25" href="#" target="_blank" alt="Facebook" />
<area shape="rect" coords="42,4,69,24" href="#" target="_blank" alt="Twitter" />
</map>
</p>
</div> <!--End of header-->
<div id="picheader">
<div id="menu">
<ul>
<li>About Us</li>
<li>Mission</li>
<li>Services</li>
<li>Admission</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
<!--End of navigation-->
</div> <!--End of picheader-->
</div> <!--End of headercont-->
<div id="contentbox">
<div id="contentcont">
<div id="textcont">
<?php
if (!isset($_REQUEST['topic']))
include("aboutus.php");
else
{
$topic = $_REQUEST['topic'];
$nextpage = $topic . ".php";
include($nextpage);
} ?>
</div><!--End of textcont-->
<div id="linkcont">
<h3>Resources</h3>
<ul class="links">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div> <!--End of linkcont-->
</div>
</div> <!--End of contentbox-->
</div> <!--End of container-->
<div id="copybox">
2013 © NHYC
</div> <!--End of copybox -->
</body>
</html>
#contentbox {
overflow: hidden;
}
...will correct your issue.
You have an uncleared float there, and overflow: hidden will clear it. Read more about block formatting context (the weird hidden CSS nuance that overflow: hidden applies) here.
I am trying to center my menu bar with my logo in the middle. right now everything is floating but it wont center to the middle of the page. Also when it is centered i need the background image that i placed on the left and right side of the logo to resize according to the width of the page - here is a link to how it looks live - Menu Test
on my website i still have the original menu I created where I placed the logo behind the menu bar and set a longer width so that the background would stretch but it won't auto adjust because of it.... Current Menu
I know my code is not perfect so please just bear with me
html
<div id="access">
<div class="menu-container">
<ul id="menu-left" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Services
</li>
</ul><!--END of menu-navigation-left-->
<ul id="menu-center">
<li class="menu-item">
<img src="images/logo.png" alt="Menu">
</li>
</ul> <!--close div center-->
<ul id="menu-right" class="menu">
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Contact
</li>
<li class="menu-item">
Portfolio
</li>
</ul><!--END of menu-navigation-left-->
</div><!--END of menu-navigation-container-->
</div><!--END of access-->
css
header {
position:fixed;
}
#access {
width:100%;
overflow:hidden;
left:50%;
}
#access ul.menu{
display: inline-block;
}
#access ul {
}
#access ul a{
display:block;
}
#access ul#menu-left {
height:120px;
background-image:url(../images/menu.png);
}
#access ul#menu-center {
height:120px;
}
#access ul#menu-right {
height:120px;
background-image:url(../images/menu.png);
}
ul, li {
margin:0px;
padding:0px;
list-style:none;
float:left;
display:block;
}
#access a {
display: block;
font-size: 16px;
line-height: 15px;
padding: 13px 10px 12px 10px;
text-transform: titlecase;
text-decoration: none;
font:"Mc1regular", Arial, sans-serif;
}
a:link{
color:#fff;
}
a:visited{
color:#fff;
}
This should sort out your alignment issues.. just replace with your specs. I would just have one menu and centre it.
PLEASE NOTE, YOUR HEADER POSITION IS FIXED> position:relative would be better..
div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}
div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding-right: 20px;
}
a {
display: block;
color: #a29060;
text-decoration: none;
}
<div class="container">
<div class="box">
<div class="top">
<ul >
<li>Contact</li>
<li>Policies</li>
<li><img class="logo" src="images/logo.jpg" alt="logo" /></li>
<li>Policies</li>
</ul>
</div>
see this fiddle
http://jsfiddle.net/yvytty/RJ4Yp/
You can also have a look at this (it's not finished) but it has the basic layout sorted, menus etc
https://www.yve3.com/index.html
This is also a link to a great forum, HTML.net. They give you good opinions of your site and have a lot of expertise (just like here)
http://www.html.net/forums/