Hi
Can someone tell me why the content panel on my page does not display correctly until the mouse moves over the menu on the left. Here is the page: <!-- m --><a class="postlink" href="http://www.brewsterware.com/hypnofish/smoke3.html">http://www.brewsterware.com/hypnofish/smoke3.html</a><!-- m -->
and here is the code:
#menu
{
float: left;
width: 25%;
}
#menu a
{
display: block;
margin: 0;
padding: 1px;
padding-left: 3px;
border: 1px solid #FFF;
font: bold;
color: black;
text-decoration: none;
}
#menu a:hover
{
background-color: #D4D4DF;
color: rgb(50%,0%,0%);
color: black;
border: 1px solid #666666;
border-right-width: 4px;
padding-right: 7px;
margin-right: 3px;
}
#content
{
text-align: left;
float: right;
DISPLAY: block;
border-width: thin;
border-style: groove;
padding-bottom: 10px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
background: #D4D4DF url(logo_background.gif) bottom right no-repeat;
OVERFLOW: auto;
HEIGHT: 400px;
width: 75%;
overflow-x: hidden;
}
Any help would be greatly appriciated.
Brewit works fine for me on opera 7.6
You should make that menu into a listAgreed make them menu a list better for semantics. I did see the problem in firefox 0.8 but i dont see whats causing this.I'm surprised it displayed with so few errors in Opera; now I know Opera doesn't conform to standards.
Two main problems; floating and hover
After a float you nearly always need to clear.
Place "belt" values (margin, padding and border) you are going to use in the anchor rule. In the hover just change the colors not the widths. If a hover causes a jittering effect then you have done this wrong.
Quite a few other values have been changed or deleted in the css.
The document has been switched to standards mode and the #footercontainer moved into #main.
The image elements don't validate and as the others have said you could change the menu to a list.Thanks for your help people.
much appriciated
BrewThe Content panel was at the bottom far right in my firefox and when I went over the menu items, there was a flashing of the content panel near its correct position.
It looks to me like you are trying to do something like this with <div>s
--- ------
|.| |....|
--- |....|
--- |....|
|.| |....|
--- ------
^ I hope that makes sense.
What I would do is wrap the two left divs with antoher div and float it left. Then you content panel should just float left as normal. Then have your footer clear both of course. Like this:
<div id="main">
<div id="pagetitle">title</div>
<div id="sidebarWrapper" style="float:left; width:200px;">
<div id="menu">menu items</div>
<div id="smoke">smoke blob</div>
</div>
<div id="content" style="float:left;">your content</div>
<div id="footer">your footer</div>
</div>
Good luck!
Can someone tell me why the content panel on my page does not display correctly until the mouse moves over the menu on the left. Here is the page: <!-- m --><a class="postlink" href="http://www.brewsterware.com/hypnofish/smoke3.html">http://www.brewsterware.com/hypnofish/smoke3.html</a><!-- m -->
and here is the code:
#menu
{
float: left;
width: 25%;
}
#menu a
{
display: block;
margin: 0;
padding: 1px;
padding-left: 3px;
border: 1px solid #FFF;
font: bold;
color: black;
text-decoration: none;
}
#menu a:hover
{
background-color: #D4D4DF;
color: rgb(50%,0%,0%);
color: black;
border: 1px solid #666666;
border-right-width: 4px;
padding-right: 7px;
margin-right: 3px;
}
#content
{
text-align: left;
float: right;
DISPLAY: block;
border-width: thin;
border-style: groove;
padding-bottom: 10px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
background: #D4D4DF url(logo_background.gif) bottom right no-repeat;
OVERFLOW: auto;
HEIGHT: 400px;
width: 75%;
overflow-x: hidden;
}
Any help would be greatly appriciated.
Brewit works fine for me on opera 7.6
You should make that menu into a listAgreed make them menu a list better for semantics. I did see the problem in firefox 0.8 but i dont see whats causing this.I'm surprised it displayed with so few errors in Opera; now I know Opera doesn't conform to standards.
Two main problems; floating and hover
After a float you nearly always need to clear.
Place "belt" values (margin, padding and border) you are going to use in the anchor rule. In the hover just change the colors not the widths. If a hover causes a jittering effect then you have done this wrong.
Quite a few other values have been changed or deleted in the css.
The document has been switched to standards mode and the #footercontainer moved into #main.
The image elements don't validate and as the others have said you could change the menu to a list.Thanks for your help people.
much appriciated
BrewThe Content panel was at the bottom far right in my firefox and when I went over the menu items, there was a flashing of the content panel near its correct position.
It looks to me like you are trying to do something like this with <div>s
--- ------
|.| |....|
--- |....|
--- |....|
|.| |....|
--- ------
^ I hope that makes sense.
What I would do is wrap the two left divs with antoher div and float it left. Then you content panel should just float left as normal. Then have your footer clear both of course. Like this:
<div id="main">
<div id="pagetitle">title</div>
<div id="sidebarWrapper" style="float:left; width:200px;">
<div id="menu">menu items</div>
<div id="smoke">smoke blob</div>
</div>
<div id="content" style="float:left;">your content</div>
<div id="footer">your footer</div>
</div>
Good luck!