A website I'm working on, www.flynntec.com, is having problems with IE8. I'm assuming it's happening in 6 and 7 as well. Firefox/Chrome both work fine.
I have two Ads in the CSS3 dropdown (Excel) that when IE mouses over the ads, the dropdown closes. IE8 can hover over EVERYTHING else in the dropdown, but as soon as it hits the ads, the dropdown closes immediately.
Any thoughts?
CODE ADDED
HTML
<!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" />
<meta name="description" content="Microsoft Office Tutorials - Excel, Word, PowerPoint, Access" />
<title>Microsoft Office Tutorials - Excel, Word, PowerPoint, Access</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-image: url(media/background.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div align=center id="container">
<div id="banner"><img src="media/banner.jpg" width="800" height="120" alt="Microsoft Office Tutorials Banner" /></div>
<div id="content">
<ul id="menu">
<li>Home<!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Microsoft Office Tutorials</h2>
</div>
<div class="col_2">
<p>This site is dedicated to training people to use Microsoft Excel, Word, PowerPoint and Access. Whether you're just beginning or a professional, there are resources here for you.</p>
<p>Our philosophy is different. We have created our own tutorials, but we've also leveraged the power of the internet to gather the world's best training tutorials on the Microsoft Office Suite.</p>
</div>
<div class="col_2">
<h2>Our Philosophy</h2>
</div>
<div class="col_1">
<img src="media/FreeMini.jpg" alt="Always Free" width="125" height="48" vspace="10" />
</div>
<div class="col_1">
<p>We are dedicated to providing you the best information. <b>Always Free </b></p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li>Excel<!-- Begin Excel Item -->
<div class="dropdown_5columns"><!-- Begin ExcelContainer -->
<div class="col_5">
<h2>Microsoft Excel</h2>
</div>
<div class="col_1"> <h3>Overview</h3>
<p class="black_box">Microsoft Excel is the world's most popular spreadsheet creation tool.</p>
</div>
<div class="col_1">
<ul class="greybox"><h3>Beginner</h3><li>Welcome to Excel</li>
<li>Calculations</li>
<li>Functions and Formulas</li>
<li>Formatting</li>
<li>Creating Charts</li>
<li>More...</li>
</div>
<div class="col_1">
<ul class="greybox"><h3>Intermediate</h3><li>Freezing Panes</li>
<li>The =IF Formula</li>
<li>Conditional Formatting</li>
<li>The Date in Excel</li>
<li>Drop-Down Lists</li>
<li>More...</li>
</div>
<div class="col_1">
<ul class="greybox"><h3>Advanced</h3><li>Using =VLOOKUP</li>
<li>Pivot Tables</li>
<li>Using the Goal Seek Feature</li>
<li>Templates</li>
<li>Macros</li>
<li>More...</li>
</ul>
</div>
<div class="col_1">
<ul class="greybox"><h3>Sponsor</h3><p><script type="text/javascript"><!--
google_ad_client = "ca-pub-1357665793080808";
/* Support */
google_ad_slot = "8875829615";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> </p>
</div>
<div class="col_1">
<p></p>
</div>
<div class="col_5">
<h2>Additional Free Resources</h2>
</div>
<div class="col_3">
<img src="media/youtube-logo.jpg" alt="YouTube Picture" name="youtube" width="90" height="70" class="img_left imgshadow" id="youtube" />
<p>If you prefer to learn visually, YouTube is the best free source for Excel tutorials in the world. We have compiled the best, most popular Excel tutorials from YouTube and put them here for your convenience. </p>
<br />
<img src="media/microsoft-logo__111129012732.jpg" alt="" name="microsoft" width="90" height="24" class="img_left imgshadow" id="microsoft" />
<p>Microsoft has some of the best tutorials in the world listed on their website. Microsoft Training can be found here.</p>
<br />
</div>
<div class="col_5">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1357665793080808";
/* Excel CSS3 Dropdown */
google_ad_slot = "0975939945";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div><!-- End Excel container -->
</li><!-- End Excel Item -->
CSS
#charset "utf-8";
/* CSS Document */
#container {
}
#banner img{
border:7px solid #FFF;
border-radius: 7px;
-moz-border-radius: 7px
-webkit-border-radius: 7px;
}
#banner {
padding-bottom: 0px;
}
#content {
}
#footer {
}
#menu {
list-style: none;
width: 774px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #003910;
background: -moz-linear-gradient(top, #FFF, #003910);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#003910));
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
border: 1px solid #FFF;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color: #161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right: 21px;
background: url(media/drop.png);
background-repeat: no-repeat;
background-position: right 8px;
}
#menu li:hover .drop {
background: url(media/drop.png);
background-repeat: no-repeat;
background-position: right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;top:auto;
}
.dropdown_1column {width: 146px;}
.dropdown_2columns {width: 284px;}
.dropdown_3columns {width: 422px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 740px;}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:rightright;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left {
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->
Thanks!
This issue is caused by a particular wmode setting on the Flash object. For what you're after, you need the wmode to be opaque, and not window, direct, gpu or the default. However, since you are using Google ads you have absolutely no control over the content (you can't even use JavaScript to change it because of cross-domain issues). This is probably deliberate on Google's part, to prevent users from hiding ads by covering them up with another element, but frustrating when trying to have anything legitimiately on top of it.
The best suggestion I can come up with is to have the container for the ad change its visibility style to hidden while the menu is shown, then change it back to visible afterward. It'll look messy, but at least it won't be handled on top of your actual content.
Related
The menu itens are not centered inside the space when it is hovered.
I tried to set text-align:center in the #menu li but it didn't work.
This image help to understand what is going on:
http://s2.postimg.org/r86nygkeh/CSS.png
<ul id="menu">
<li>Home<!-- Begin Home Item -->
</li><!-- End Home Item -->
<li>4 columns<!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h3>This is a heading title</h3>
</div>
<div class="col_1">
<ul>
<li>ThemeForest</li>
<li>GraphicRiver</li>
<li>ActiveDen</li>
<li>VideoHive</li>
<li>3DOcean</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>NetTuts</li>
<li>VectorTuts</li>
<li>PsdTuts</li>
<li>PhotoTuts</li>
<li>ActiveTuts</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>FreelanceSwitch</li>
<li>Creattica</li>
<li>WorkAwesome</li>
<li>Mac Apps</li>
<li>Web Apps</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>Design</li>
<li>Logo</li>
<li>Flash</li>
<li>Illustration</li>
<li>More...</li>
</ul>
</div>
<div class="col_4">
<h2>This is a heading title</h2>
</div>
<div class="col_1">
<ul>
<li>ThemeForest</li>
<li>GraphicRiver</li>
<li>ActiveDen</li>
<li>VideoHive</li>
<li>3DOcean</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>NetTuts</li>
<li>VectorTuts</li>
<li>PsdTuts</li>
<li>PhotoTuts</li>
<li>ActiveTuts</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>FreelanceSwitch</li>
<li>Creattica</li>
<li>WorkAwesome</li>
<li>Mac Apps</li>
<li>Web Apps</li>
</ul>
</div>
<div class="col_1">
<ul>
<li>Design</li>
<li>Logo</li>
<li>Flash</li>
<li>Illustration</li>
<li>More...</li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
</ul>
CSS
/* Navigation Bar */
#menu {
list-style:none;
width:882px;
/* width:100%; */
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
/* Rounded Corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Background color and gradients */
background: #c92424;
background: -moz-linear-gradient(top, #dd4343, #9e1c1c);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd4343), to(#9e1c1c));
/* Borders
border: 1px solid #002232;
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff; */
}
#menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 0px 4px 0px;
margin-top:7px;
border:none;
width:110.25px;
}
#menu li:hover {
height:21px;
margin-top:1px;
padding: 11px 0px 11px 0px;
/* Background color and gradients */
background: white;
/* background: -moz-linear-gradient(top, #e56e6e, #e56e6e);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e56e6e), to(#e56e6e)); */
}
#menu li a {
font-family:Arial, Verdana, sans-serif;
font-weight: bold;
font-size:14px;
line-height:21px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
}
/* Drop Down */
.dropdown_2columns,
.dropdown_4columns {
margin:11px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #c92424;
border-top:none;
/* Gradient background
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_2columns {width: 280px;}
.dropdown_4columns {width: 560px;}
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_4columns{
left:-1px;
top:auto;
}
/* Columns */
.col_1,
.col_2,
.col_4{
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_4 {width:550px;}
/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Verdana, sans-serif;
font-weight: bold;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
I think your padding-right is messing it up
#menu li .drop {
padding-right: 21px; //comment out this guy and try again
}
in chrome, you can right click on the nav, select inspect element, and chrome will hilight the element, the element's padding, and the elements margins in different colors so you can see why the layout is the way it is
hope that helps!
changed your #menu li a to
#menu li a:link, #menu li a:active {
font-family:Arial, Verdana, sans-serif;
font-weight: bold;
font-size:14px;
line-height:21px;
color: #EEEEEE;
display:inline;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding:0;
margin:0;
}
It's because the actual text (IE "4 Columns") is wrapped in an <a> tag. Remove text-align:center; from both menu li and menu li:hover then add these two rules to menu li a
#menu li a {
width:110.25px;
text-align: center;
}
Those two rules in addition to the rules you already have of course.
Here is the DEMO
In my html i have somewhat like this
<div id="content">
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>General Information </legend>
</fieldset>
<fieldset class="step">
<legend>Medical History</legend>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li class="selected">
General Information
</li>
<li>
Medical History
</li>
</div>
</div>
my css file is this
#content{
margin:30px auto;
text-align:center;
width:900px;
position: relative;
height:100%;
}
#left{
position: absolute;
z-index: 1;
margin-top:10px;
margin-left:30px;
text-align:center;
width:170px;
color:#000000;
height:500px;
-moz-box-shadow:0px 0px 13px #aaa;
-webkit-box-shadow:0px 0px 13px #aaa;
box-shadow:0px 0px 23px #aaa;
background-color:rgba(300,250,250,0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#wrapper{
-moz-box-shadow:0px 0px 13px #aaa;
-webkit-box-shadow:0px 0px 13px #aaa;
box-shadow:0px 0px 23px #aaa;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:2px solid #fff;
//background-color:#f9f9f9;
background-color:rgba(220,220,220,0.5);
width:1000px;
height:100%;
overflow:hidden;
}
#steps{
width:1000px;
height:520px;
overflow: auto;
/* overflow: scroll;
overflow: */
}
.step{
float:left;
width:1000px;
/* height:600px; */
overflow-y: auto;
/* overflow:-moz-scrollbars-vertical; */
/*height:320px;*/
}
#navigation{
height:40px;
background-color:#e9e9e9;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:10px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
font-size: 10px;
display:block;
height:40px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:40px;
width: auto;
padding:0px 5px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#f0f0f0;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
I want to adjust my height of every fieldset according to the length of fields present in it. how can i do this?
Fieldsets automatically adjust in height to contain the form elements contained within. No additional CSS is required.
The fieldsets must contain form fields obviously; not 100% sure why you've omitted them from your example code.
I am trying float two columns called column_l and column_r side by side on an about page but the problem I am having is that its moves and messes up the footer and hangs outside of the container div.
column_l contains the info about the company while column_r contains a picture.
I will show my code, but basically, the body contains a container which I have put all my code on.
For this, I created a wrapper to include the two columns.
body{
background-image:url('../img/small_logo.jpg');
background-repeat:repeat;
position:relative;
background-position:50% 50%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.8em;
/*padding-left:25px;
padding-right:25px;*/
overflow:visible;
margin:0px auto;
background-attachment:fixed;
min-height:100%;
width:100%;
/* FOR A LARGE-SINGLE IMAGE TO STRETCH COMFORTABLY ACROSS A BODY
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;*/
}
#container{
margin: auto;
padding:10px;
background-color:#F5F5DC;
width:720px;
border:2px black solid;
position:relative;
background-attachment: scroll;
display:block;
height:auto;
margin-bottom:10px;
padding-bottom:15px
}
#logo{ margin:0;
padding:auto;
position: inherit;
display:block;
height:auto;
width:auto;
}
#wrapper{margin:auto; height:auto; width:100%;}
#column_l {
width: 60%;
margin: 0;
padding: 0;
background-color: #FFFF99;
float:left;
}
#column_r {
width: 40%;
margin: 0;
margin-right:0px;
float: right;
background-color: #FFFF99;
position: absolute;
left:60%;
}
#column_r p {
font-size: 11px;
margin: 7px;
}
#nav{
background-color: #800000;
margin-left: 0px;
text-align: center;
border-top: 2px solid #800000;
border-bottom: 2px solid #800000;
padding:10px 0 10px 0;
font-family:"Buxton Sketch";
font-size:16px;
}
#rightContainer{
float:right;
margin:0;
padding:0;
border:2px solid;
width:25%;
height:400px;
}
th{font-size:large;
}
#footer{
margin-left:0;
padding:10px 0 10px 0;
text-align:center;
opacity:0.6em;
filter:alpha(opacity=60); /* For IE8 and earlier */
height:40px;
vertical-align:bottom;
font-family:"Buxton Sketch";
font-size:16px;
}
#copyright{
margin:auto;
padding:3px;
text-align:center;
}
#copyright p{
font-size: 12px;
color:#000000;
}
#fb {padding:2px;margin:auto; float:left; }
/* Styles for Navigation */
#nav ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
}
#nav li {
float: left;
}
#nav a {
color: #fff;
text-decoration: none;
margin: 0 3px;
padding: 5px;
display: inline;
}
#nav a:hover {
border: 1px solid #456;
background-color: #F0E68C;
font-size:large;
color:black;
}
/* Styles for Footer */
#footer ul {
list-style-type: none;
width: 100%;
margin: 0px;
padding: 5px;
padding-top:5px;
}
#footer li {
float: left;
}
#footer a {
color: black;
text-decoration: none;
margin-top: 0px;
padding-top: 5px;
display: inline;
}
#footer a:hover {
border: 1px solid ;
background-color: #F0E68C;
font-size:medium;
}
/*Classes */
.largehead h1{font-size:x-large;}
.shadow:before,
.shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.shadow p {
font-size:16px;
font-weight:bold;
}
.shadow img {
font-size:16px;
font-weight:bold;
}
/* Shadow Style */
.shadow {
-moz-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue; /* For Older Versions */
-webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
/* For 'IE' */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5) /* Top */
progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3) /* Right */
progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3) /* Bottom */
progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/* Left */
}
-webkit-box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
box-shadow:2px 2px 5px black,-2px -2px 5px lightblue;
/* For 'IE' */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=0,strength=5) /* Top */
progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=90,strength=3) /* Right */
progid:DXImageTransform.Microsoft.Shadow(color=#777777,direction=180,strength=3) /* Bottom */
progid:DXImageTransform.Microsoft.Shadow(color=lightblue,direction=270,strength=5);/* Left */
}
/* Rotated box*/
.rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rotated > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
/* Curled corners */
.curled {
border:1px solid #efefef;
-moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.curled:before,
.curled:after {
bottom:12px;
left:10px;
width:50%;
height:55%;
max-width:200px;
max-height:100px;
-webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
-webkit-transform:skew(-8deg) rotate(-3deg);
-moz-transform:skew(-8deg) rotate(-3deg);
-ms-transform:skew(-8deg) rotate(-3deg);
-o-transform:skew(-8deg) rotate(-3deg);
transform:skew(-8deg) rotate(-3deg);
}
.curled:after {
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
dl.border-around
{
margin: 2em 0;
padding: 0;
width: 20em;
float:right;
}
.border-around dt
{
background-color: #131210;
color: #959289;
padding: .5em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
border-left: 1px solid #131210;
border-right: 1px solid #131210;
border-top: 1px solid #131210;
}
.border-around dd
{
margin: 0 0 1em 0;
background: #DBD8D8;
text-align: center;
padding: 1em .5em;
font-style: italic;
border-left: 1px solid #131210;
border-right: 1px solid #131210;
border-bottom: 1px solid #131210;
}
div.wrapperleft{
float:left;
position:relative;
}
}
div.wrapper{
float:right; /* important */
position:relative; /* important(so we can absolutely position the description div */
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
width:60%;
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
opacity:0.6; /* transparency */
filter:alpha(opacity=60); /* IE transparency */
}
p.description_content{
padding:0px;
margin:0px;
}
/*Feedback*/
form {float:left; width:50%; text-align:left; padding-top:30px;color:white; margin-left:200px; list-style:none;}
textarea {border:0; padding-top:0px; font-family:"Lucida Console";}
input {border:0; padding:0; font-family:"Lucida Console";}
submit {border:0; padding:0; font-family:"Lucida Console";}
label {border:0; padding:0; font-family:"Lucida Console";}
label {float:left; width:150px; text-align:right; display:block;margin-top:5px;}
textarea {border:1px gray solid; margin-left:10px; padding:5px;}
input, datalist {border:1px gray solid; margin-left:10px; padding:5px;}
input {width:280px; margin-bottom:16px;}
textarea {width:280px; height:150px; text-align:justify; margin-bottom:16px;}
#feedback {padding-top:10px; margin-right:100px;}
and for the html:
<body > <!-- START BODY -->
<!-- START CONTAINER -->
<div id="container" class="shadow lifted">
<div id="logo"> <!-- START LOGO -->
<img src="img/cropped_logo.jpg" alt="logo" width=720px height=300px />
</div> <!-- END LOGO -->
<!-- START NAV-->
<div id="nav" class="shadow">
<a href="index.html" > Home</a>
Menu
Wholesale
Our Story
Contact Us
</div> <!-- END NAV-->
<div id="wrapper">
<!-- Begin Left Column -->
<div id="column_l">
<h1>Our Story</h1>
<p> What started out as making ice cream for family and friends, in our home kitchen, quickly flourished into a labor of love and creativity for ice cream aficionado Hugh Balthrop. "For me, ice cream is all about real flavor using natural and local ingredients. This is where the passion is for me. Ice cream brings out the inner kid in everyone". Ever had Sweet Potato Ice Cream with candied pecans? What about lemon sweet tea sorbet? Wild Blueberry Frozen Yogurt? Blackberry or Watermelon Sorbet? The list goes on and on... Where can you find it, you ask? Right now, you can grab some at Oxbow Restaurant, in Clarksdale, MS, Mississippi Grounds and Cleveland Country Club in Cleveland, MS, Delta Bistro and TurnRow Books, in Greenwood, MS.</p>
</div><!-- End Left Column -->
<!-- Begin Right Column -->
<div id="column_r">
<img alt="" height="288" src="img/hugh.jpg" width="193" />
<p>Hugh Balthrop</p>
</div><!-- End Right Column -->
</div><br> <!--end wrapper-->
<div id="footer" class="shadow lifted">
<div class="fb-like" data-href="https://www.facebook.com/pages/Sweet-Magnolia-Ice-Cream-Co/303952586284264?fref=ts" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" clear:both></div>
Home
Menu
Wholesale
Our Story
Contact Us
</div> <!-- end of footer -->
<div id="copyright" class="lifted">
<p id="copyright">Sweet Magnolia Ice Cream Company © 2013. All Rights Reserved.</p>
</div>
</div> <!-- End of Container -->
</body>
</html>
I tried pushing column_r over with left:60% but it now covers up the footer.
You are forgetting to clear the floats.
Add
#footer { clear: both; }
And it will fix the problem.
Adding
float:left;
to the #wrapper CSS class will make the outer containing div expand to hold the contents of the article.
There are still some left over style issues you will have to deal with but hopefully this gets you on your way.
Add the rule 'clear: both; to the footer css styling, should do the trick!
i want that login and sign up link or button should remain fixed at the top right position of the browser window with in the wrapper div. but when i change the browser window size the button gets disappear or comes over the header.
HTML Code
Having a login_bar div section which has a ul list and then the header div section
<div id="wrapper">
<div id="login_bar" style="text-align: right">
<ul id="login_signup">
<li>Login <span>◀</span></li>
<li>SignUp <span>◀</span></li>
</ul>
</div>
<div id="header">
</div>
</div>
CSS file
#login_bar{
width:300px;
position:fixed;
z-index:10;
border:1px solid black;
top:-5px;
right:150px;
}
#header{
width:1000px;
background-image:url('../images/hf1.jpg');
background-size: 100%;
background-repeat: no-repeat;
position: relative;
border-radius:5px;
min-height: 100px;
}
#login_signup{
float:right;
}
#login_signup > li{
float:left;
padding-right: 30px;
list-style: none;
line-height:25px;
padding-top:6px;
display:inline-block;
}
#login_signup li > a{
font-family:sans-serif;
font-size: 17px;
font-weight: bold;
color:white;
padding:5px;
display:inlineblock;
background-color:black;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-o-border-radius:5px;
box-shadow: rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
}
#login_signup li span{
font-size: 12px;
display:inlineblock;
}
#login_signup li a:hover{
cursor: pointer;
box-shadow: rgb(255,255,255) 0px 0px 5px;
-moz-box-shadow: rgb(255,255,255) 0px 0px 5px;
-webkit-box-shadow: rgb(255,255,255) 0px 0px 5px;
-o-box-shadow:rgb(255,255,255) 0px 0px 5px;
border-radius: 2px;
background-color: white;
color:#006666;
}
Both the div section is inside a wrapper div which is in the center
#wrapper{
width:1000px;
min-height:600px;
margin:5px auto;
border-radius:5px;
border-style: solid;
border:solid 1px grey;
box-shadow:rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
background-color: black;
}
Currently, you're using position: fixed and right:150px; for your login_bar, you need to change the right value to 0px to fix it at the right side:
#login_bar{
width:300px;
position:fixed;
z-index:10;
border:1px solid black;
top:-5px;
right:0px;
}
as well as remove padding-right: 30px; of your list:
#login_signup > li{
float:left;
padding-right: 30px; /* <-- Remove this */
list-style: none;
line-height:25px;
padding-top:6px;
display:inline-block;
}
Demo
Note: I'm not sure this is what you want, so feel free to ask for more clarifications.
I tested your original setup and it seems to work correctly (at least from how I understood your question). Tested it in IE, Firefox and chrome and looks good... below the css the html file I used:
<!DOCTYPE html>
<html>
<head>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="login_bar" style="text-align: right">
<ul id="login_signup">
<li>Login <span>◀</span></li>
<li>SignUp <span>◀</span></li>
</ul>
</div>
<div id="header">
test
</div>
</div>
</body>
</html>
test.css:
#wrapper{
width:1000px;
min-height:600px;
margin:5px auto;
border-radius:5px;
border-style: solid;
border:solid 1px grey;
box-shadow:rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
background-color: black;
}
#login_bar{
width:300px;
position:fixed;
z-index:10;
border:1px solid black;
top:-5px;
right:150px;
display:inline-block;
}
#header{
width:1000px;
background-image:url('../images/hf1.jpg');
background-size: 100%;
background-repeat: no-repeat;
position: relative;
border-radius:5px;
min-height: 100px;
}
#login_signup{
float:right;
/*display:inline; */
}
#login_signup > li{
float:left;
padding-right: 30px;
list-style: none;
line-height:25px;
padding-top:6px;
display:inline-block;
}
#login_signup li > a{
font-family:sans-serif;
font-size: 17px;
font-weight: bold;
color:white;
padding:5px;
display:inline-block;
background-color:black;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-o-border-radius:5px;
box-shadow: rgb(0,0,0) 0px 0px 10px;
-moz-box-shadow: rgb(0,0,0) 0px 0px 10px;
-webkit-box-shadow: rgb(0,0,0) 0px 0px 10px;
-o-box-shadow:rgb(0,0,0) 0px 0px 10px;
}
#login_signup li span{
font-size: 12px;
display:inline-block;
}
#login_signup li a:hover{
cursor: pointer;
box-shadow: rgb(255,255,255) 0px 0px 5px;
-moz-box-shadow: rgb(255,255,255) 0px 0px 5px;
-webkit-box-shadow: rgb(255,255,255) 0px 0px 5px;
-o-box-shadow:rgb(255,255,255) 0px 0px 5px;
border-radius: 2px;
background-color: white;
color:#006666;
}
If you were previously having issues in IE, you may have just forgotten to add <!DOCTYPE html> on top of the html file...
Website:
http://younani.com/finalsite/finalindex.html
My header aligns when the browser is not maximized. When I maximized it to moves and is not aligned. How can I align it so that it will never move. I want it to be in the exact same position as the rest of the content material underneath it
CSS:
#header {margin-left:50px; align: center;
}
#container {
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif; background-position: center; background-size: cover;
}
#h2 {text-align: center;}
#container {
margin-right:auto;
margin-left:auto;
background-image:url('backgroundflower5.jpg');
min-width:1000px;
max-width:1000px;
padding:0px 70px 50px 70px;
border:1px ridge #000000;
border-radius:20px;
-webkit-box-shadow:inset -3px -3px -3px 3px #18cad0;
-moz-box-shadow:inset -3px -3px 3px 3px #00332B;
box-shadow:inset -3px -3px 1px .9px black;
width: 960px;
margin: 0 auto;
}
#container div {
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; box-shadow:inset 1px 1px 10px 1px #000000; }
#center {box-shadow:inset 1px 1px 10px 1px #000000;}
#left,
#center,
#right {
float: left; margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF; box-shadow:inset 1px 1px 10px 1px #000000; text-align: center;}
#left a {font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
figure{}
#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }
#left ul { list-style-type: none;
margin: 0;
padding-left: 0; }
#footer { text-align: center; font-family: Audimat;
clear: both; width:38%;
border-radius: 8px;
background-color:white;
text-align:center; margin-right:auto;
margin-left:auto; box-shadow:inset 1px 1px 10px 1px #000000;}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="header"><img src="header88.png" alt="header" height="200" width="1150" align="left:100px" /></div>
<div id="container" class="clearfix"><!-- Header --> <!-- Left Column -->
<div id="left">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Occasions</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Center Column -->
<div id="center">
<p><strong>In-store Specials</strong></p>
<p>Dozen Red Roses: $12.99</p>
<p>Bouquet of TEN different garden flowers: $19.99</p>
<p>Small glass vases: $9.99 <br /> Medium glass vases $14.99 <br /> Large glass vases: $19.99</p>
<p>Buy THREE of the any vases and receive the fourth one FREE!</p>
</div>
<!-- Right Column -->
<div id="right">
<p><span style="text-decoration: underline;"><strong>Birth Month Flowers<strong></strong></strong></span></p>
<p>January Carnation</p>
<p>February Iris</p>
<p>March Daffodil</p>
<p>April Daisy</p>
<p>May Lily</p>
<p>June Rose</p>
<p>July Delphinium</p>
<p>August Dahlia</p>
<p>September Aster</p>
<p>October Calendula</p>
<p>November Chrysanthe</p>
<p>December Poinsettia</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b>Home Gallery Occasions About Us Contact Us </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
you are using margin-left:50px; use instead margin :0 auto;
#header {
margin: 0 auto;
width: 1150px;
}
what margin-left it does
so it will be 50px left form the browser and on difference width it will looks difference so the better approach is use margin:0 auto;
margin:0 auto makes always in center
Define your #header with or margin : 0 auto as like this
#header {
margin: 0 auto;
width: 1150px;
}
Results is
Your content should be wrapped in a container div that contains all of your content. it can be fixed width for consistency if that's what you're looking for, or fluid using other css properties to support that.