CSS - 2 Probs: Float Rendering/active X Message

Hi all,

I've always learned what I know (which isn't all that much, but wtf) from trying to fathom the source code of cool sites I visit and then attempting to implement those things I like into my own page. I recently visisted a very cool site that uses a CSS drop down menu. The only problem is it's got one level and I want more than that. I've attempted to tweak the code through trail and error and my basic basic understanding of CSS, but to no avail. When you roll over the top level menu, the secondary displays as it should but the 3rd also displays before you roll onto the link that should activate it. I'm sure I'm just missing somethign small but after working on this for a number of days, trying to figure it out, I appeal to you all for help! Thanks in advance for your support and suggestions!

Here is the HTML code for the section (I edited it just so you can see what I'm looking for)

<div id="navigation">
<ul id="nav">
<li class="nav"><a href="" onclick="return false">Novels</a>
<ul class="subnavnovels">
<li class="subnav"><a href="" onclick="return false">Lawson Vampire Novels</a>
<ul class="subsubnav">

<li class="subsubnav"><a href="fixer.html">The Fixer</a></li>
<li class="subsubnav"><a href="invoker.html">The Invoker</a></li>
<li class="subsubnav"><a href="des.html">The Destructor</a></li>
<li class="subsubnav"><a href="syn.html">The Syndicate</a></li>


</ul>
</li>
</ul>
</li>


And here's the CSS code for the nav section:

/* NAVIGATIONAL ELEMENTS */
#nav {z-index:3;}
#nav a {color:#FFF;text-decoration:none}
#nav a:hover {color:#07B6D0;text-decoration:none}
li.nav {margin-right:24px;}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

li { /* all list items */
float: left;
position: relative;
}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
padding:3px 7px;
border:1px solid #27444C;
}

li ul ul { /* third-level lists */
display: none;
width: 100px;
position: absolute;
top: 0;
left: 140;
padding:3px 7px;
border:1px solid #27444C;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block; clear:left; background:url(menubg.png);
}




.subnavnovels {width:140px;}
.subnavshorts {width:140px;}
.subnavnonfic {width:160px;}
.subnavother {width:170px;}
.subnavcommunity {width:170px;}
.subnavabout {width:100px;}
.subnavcontact {width:100px;}


li.subnav {float:none;}
li.subsubnav {display:inline;}

Hi,

I'm having problems with FireFox (or rather it's having problems with my coding).

If you go to he

http://jigsaw.w3.org/css-validator/...&usermedium=all

It's all valid css but http://www.wnv2.com/v11.php shows up funny in FF but looks great in IE/Maxthon.

View course for html, but the css code is in the validation link,

Any help would be great!

Thanks

subject isn't too good

anyhow.. i have 4 cells

__ __
|1 | |2 |
--- ---
__ __
|3| |4 |
--- ---

2 and 4 are said to float right, such that 1 and 3 define the height of the page..

but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens

__ __
|1 | |2 |
--- | |
--- | |
|4| ---
---
__
|3|
---


do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right

any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?)

Please let me know if I need to post my questions more clear. I have read the "how to post css questions" but I don't seem to be getting any responses.
BTW: if the site is working in IE for you please let me know.
I appreciate your help.

I'm new to CSS and this website.
I have been working on a website that seems to be displaying properly in Chrome, FireFox, Opera and Safari. I am having problems getting it to display properly in Internet Explorer.

To see the proper lay out look at it in Safari, Opera, FF or Chrome.

the page is at :
http://www.tmdessertworks.com/neotmtest/menutest.html

Here is the CSS: Code:

<style type="text/css">
<!--
body{
	color: #e8d898;
	font-size: 12px;
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	background-color: #111111;
}

td{
	vertical-align:top;
	width: 194px;
}

td.menutitle{
	width: 700px;
}

td.thumbnail{
	width: 150px;
	text-align:right;
	}	

.navmenu1{
	text-align:center;
	padding-left: 170px;
	background: url(sitegrax/menuback_1.jpg);
}

.menu1 {
	padding-left: 22px;
	padding-top: 6px;
	padding-bottom:6px;
	background: url(sitegrax/menuback_1.jpg);
}

.endcap {
	text-align:center;
	padding-left: 64px;
	background: url(sitegrax/menu_bottomcap.jpg);
	background-repeat:no-repeat;
	}
	
	
.style {
	color: #FF6600;
	font-style: italic;
}
-->
</style>

I have validated my CSS and HTML and I have searched the forums but don't quite know what is happening to fix the problems:
1. Backgrounds not filling to 800px
2. Small spaces between <div> tags
3. Top navigation menu displaying vertical and not horizontal.


Thank you for your help

Hi i am currently designing my first webby with out using frams and tables for the layout (using dreamweaver 2004mx) and i am now using layers and css for the layout but my problem is this:

i used to use an iframe to link things from my nav bar to load in. but now i am not using frames is there anyway to make content load inside a layer on the page or do i have to make separate pages for each link and expect it to load a new page each time? i know that usin css is alot faster than using frames but even when linking to seperate pages you get that little blink as the pages switch....

any help what so ever would be much appreciated

thanks in advance

N3cr0

Hi Folks,
Anyone have any idea how I can solve this problem? I'll be most grateful. I'm trying to position a DIV element to the top-right of another fluid DIV? The blue-toned photo [please see screenshot] is going right outside of the white content area.

What it should look like

What it sadly does look like

If I get this working, will I have problems with the body text in different pages? Say, if there's no photo, can I get the text to move up automatically? The photo is not within the flow so I have the text at a fixed position.

Finally, the footer with [top-of-page arrow] seems detached when the browser is maximised.

Hoping someone can help - I've been at this a week.
John

Hi people

I have been developing a new cms system www.spindogs.co.uk

The pages work using an autostretch facility but for some reason Firefox,Safari and IE5 Mac wont stretch. The bacground stays a set length?

I initially thought it was the DOCTYPE so messed around with that but it doesnt seem to be that either?

Can anyone help me please!!!!

Hi. Three issues with this menu - I've been trying to get a horizontal hover/nested list to work where the submenus are displayed inline underneath the main menu.

1. I've got the arrangement fairly close in FF, but in IE the top level items are jumping around all over the place on hover.

2. The javascript came from alsacreations, and seems to work pretty easily, but the submenus fail to disappear on rollOut unless you are going to another of the menu items. Any ideas?

3. Do you think there is anyway of leaving the top level links in their "active/hover" state when the mouse has moved to the submenus? So the coloured background that appears on hover stays there whilst hovering over the submenus?

I've isolated the xhtml, styles and script into a page (it's a rework of a current page and is pretty incomprehensible in-situ!) at http://www.prioritypie.f2s.com/KSAV6/menuTest.html.

Cheers for any advice.

And I forgot to ask what the issue is with IE and transparent borders - they seem to appear black and of variable width!

Whats' wrong with this? a:active doesn't seem to work at all:
Code:

<style type="text/css">
#navcontainer
{
	margin: 5px 0 0 5px;
	padding: 0;
	height: 20px;
}
#navcontainer ul
{
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
#navcontainer ul li
{
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}
#navcontainer ul li a
{
	background: #000000;
	width: 80px;
	height: 18px;
	border-top: none;
	border-left: 1px solid #9B9B9B;
	border-bottom: none;
	border-right: none;
	padding: 0;
	margin: 0 0 5px 0;
	font-family:Arial, Helvetica, sans-serif;
	color: #26DC18;
	font-weight:bold;
	text-decoration: none;
	display: block;
	text-align: center;
}

#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}

#navcontainer ul li a:active
{
	background: #000000;
	color: #fff0000;
}
</style>

HTML
[CODE<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php">Home</a></li>
<li><a href="inventory.php">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div> [/CODE]

P.S. I just include this menu in a PHP page. We'll that will work iff you put # on the target page but that must not be.

Thanks!

So I've tried to make my site www.thespinzone.com
work for all browsers, but I'd settle for IE & Mozilla, however I have run into a big problem with IE (and it appears ONLY 7+) and Mozilla, all versions.
First the IE problem is that it's adding a horizontal scroll bar on my main page, not the others, and I can only assume it has something to do with the RSS headlines positioning?

screen shot 1

Now I'm having 2 problems with Mozilla:
1st: No matter how I try manipulate the CSS, the headlines won't float to the right, and they end up being squeezed next to my picture which is a waste of space and looks silly. Here is a screen shot of how it looks.
Ideally I want the headlines to be on the right hand sight of the page, as far as it can be. I WANT the layout to look, MINUS the horizontal scroll bar like that first IE screen shot.

2nd: clicking or right clicking on any of the 'headline' items, moves that entire part underneath my picture and I have no idea why? In case it doesn't do that with your mozilla version, here's a screen shot

The relevant CSS is on the index page so rather than me cut & paste it (unless that's preferred) then 'view source'.....

I appreciate any and all help and advice. Thanks

Hi There -

Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about.

Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section.

Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later.

Then there's the next section. Rounded corners. Contains the entire page.

On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section.

Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links.

----------

First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back.

Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section.

If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug.

So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu.

---------

It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners.

Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow.

Code:

<div id="top part"
logo and searchbox
</div>

<div>
that pesky space that disappears in IE when roll over primary links
</div>

<div id=navcontainer>
dropdown and tabbed menu
</div>

<div id="navigation" class="menu> <!-- couldn't find the menu class in the css -->
<div id="primary" class="clear-block">
contains barmenu - very fussy
</div>
</div>

Here's the relevant CSS:

Code:

div#navigation {
  background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}


#primary {
  line-height: 30px;
}

#primary ul {
  padding:0;
  margin:0;
  list-style:none;
}

#primary li {
  display:inline;
}

#primary a {
  font-weight:bold;
  display:block;
  float:left;
  padding:0px 14px 0px 14px;
  margin: 0px 1px 0px 0px;
  font-size: 95%;
}

#primary a {
  background-position:0% 0px;
}

#primary a:hover {
  text-decoration: none;
  background-position:0% -42px;
}

#primary a.active {
  background-position: 0% -84px;
}

#primary a {
  background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
  color:#666666;
  font-size: 120%;
  font-family:Arial,Helvetica,sans-serif;
}

#primary a:hover {
  color: 666666;
  background: #B8B8B8;
}

#primary a.active {
  color: 666666;
  background: #B8B8B8;
}

This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture.

here is my css style sheet. A demonstration of the problem can be seen at:

http://www.yourline-online.com/demo05/?How_to_create_pages
Code:

div.float {
    float: left;
    BORDER-RIGHT: #808080 2px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #808080 2px solid;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: lighter;
    FONT-SIZE: medium;
    PADDING-BOTTOM: 20px;
    MARGIN: 16px 2%;
    BORDER-LEFT: #808080 2px solid;
    COLOR: #000000;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #808080 2px solid;
    HEIGHT: 200px;
    WIDTH: 150px;
    BACKGROUND-COLOR: #ffffff;
    TEXT-DECORATION: none
  }
  
div.float p {
   text-align: center;
   }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }

MY HTML is like this:
Code:

H1>How to create pages</H1>
<P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P>
<P></P>
<DIV class=container>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> 
<P>caption 1</P></DIV>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100>
<P>caption 2</P></DIV>
<DIV class=spacer>
<DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100>
<P>caption 3</P></DIV>
<DIV class=spacer></DIV></DIV></DIV>

Hi all,

I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage:

http://www.houseofhawkins.com/index.html

which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text.

They are links with the following CSS attached:

div#Header #MenuSection a.MenuTab {

PHP Code:
 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0');
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    background-color: #BCD6BC;
    border-style: solid;
    border-width: 1px;
    border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5;
    margin: 0 5px 0 2px;
    height: 1.5em;
    width: 140px;    
    padding: 5px 1px 1px 1px;
}

div#Header #MenuSection {
    float:left;
    margin-top: 30px;
} 





here is the HTML code for that part of the page.

PHP Code:
<div ID="MenuSection">
                    <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a>
                    <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a>
                    <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a>
                </div>
            <div style="clear:left"> </div> 





I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work!

I wish to understand why its like this... I have attached the CSS and the file if that helps anyone.

Thanks for the help and advice.

Hello,

I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering.

The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents.

Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table.

Thank you!
Crystal