CSS - Blank Css Templates

For most of my webpages, I use a few element templates for body, div, etc. I'm using more positioning in my pages, and so for the sake of nested div's, I want to add some standardized positioning to my template: Code:

div{
  padding: 0;
  margin: 0;
  border: 0 #000000 solid;
/*** added positioning atributes ***/
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
}

I know that some of this is "standard", but I want to be absolutely sure the browser is going to render my page as I want it. My question is, will/should adding this positioning increase the processing/rendering time of the page (as using table-less design uses a lot of divs)? It's probably a silly thing to worry about, but I'm also interested in what atributes are more processing intensive.

I couldn't figure out why people were telling me they couldn't see my page but i could see it just fine in two different locations. Come to find out I use firefox and IE is showing a blank page. Can someone help me with this?

cookcommons . com / index_working . html

At this location, I have a page that I validated the code, but most of it is hidden in both IE 6 and IE7? Seems to work fine in FF?

Thanks for the help in advance.

I'm very new to doing my own custom CSS, so please bear with me. I have a feeling I am missing something obvious...

A space of about 22px height is appearing below my nav bar, which itself is 22px high, but is otherwise working fine. I can't figure out what code is causing the space to appear where I don't want it (just under the #page-nav and just above the #page-content).

I'm not sure how to link to my test site, as the forum does not allow new members to link to urls... I can put it in a code tag, but I don't want to 'cheat' the rules... Let me know if that's okay... (the html and css is too long to post here)

(P.S. Many, many, MANY thanks to anyone who can help me figure out this puzzle!)

The website I created has a large blank space at the bottom. I want 30px between the bottom and the layout.

At the top, I could create the space I want.
Margin-bottom: 30px doesn't do the trick.

I tried so many things but I just can't get it fixed. I think something is set too height or something? If someone could figure it out, I would be forever grateful!

You can check out the site and css he


I can't post the url because I'm a new user
Can a mod post my url?

EDIT: I have set the url as my homepage in my profile! Just click my username to check out the site.

I'm building a navagation bar. I want to have several lists, each with a heading. Due to space and visual concerns, I would like to eliminate the blank line between the heading and each list.

Here's what I have:
Code:

<div id="navigation"> 
<span class="nav_title">Archives</span>
<ul>
	<li>[...]</li>
</ul>
<p>
<span class="nav_title">Categories</span>
<ul>
	<li>[...]</li>
</ul>
[...]                                
</div>

And this is the corresponding CSS (just the ul part, obviously):
Code:

#navigation ul { 
               list-style-position: inside; 
               list-style-type: disc; 
               padding: 0; 
               margin-top: 0px; 
               padding-top: 0px; 
               display: block; 
            }

What I have right here works, but it only works for the first list. All the other lists have a blank line between the heading and the following list -- but the first does not.

I find it weird that this would work for the first time it is used, but not for the second time. I tested it by replacing the heading and list with other headings and lists and got the same result -- the *first* heading blends with the list, but the rest do not.

You can view this problem here (it's in the navigation bar on the right-hand side. "Archives" blends with its list, but nothing else does.) In case you couldn't tell, I'm trying to hack out my own WordPress theme atm -- don't yell at my table layout yet, I'm converting it from another theme and haven't finished yet

i am using display:none to hide two divs, but the space where they are located still remains... but only in firefox... here is a link... it happens when you click on one of the tabs at the bottom of the box...

15 Games

thanks for any help.

I have a page that is laid out with in a table. It has a header and a footer area. Ive defined a stylesheet for printing, and my content shows up correctly when printing (or print preview) with the header and footer items left out. What is not right though, is the 1st page is blank when i do a print preview.

Help ?

to add:
This is an asp.net web page, that has a form with several images that render inside a div element and this form is within the main table.

Here is the site:
http://wildlife. kinetic-designs. n et/

I was modifying a wordpress theme and somewhere in there i must have changed something, but now I have an unexplainable horizontal scroll bar as well as blank space off to the right of the screen.

Can someone help me explain this phenomenon ??

Hi, my css drop down menu seems to be working fine in firefox, but there are a few problems in IE. It didn't even work in IE7 until I added

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

1. In IE7, if you first hover over the link to get the drop down menu to show, move away, then hover over the menu again, it will show the blank sub menus of the one you last have opened. This is hard to explain. Please see my webpage for what I mean.

http://ling.twinner.com.tw/uselink/index.php

Move your mouse to the Products link at the top.

2. My menu seems to load slow. Is it because I have many sub menus or is my css not efficient?

3. How do I set the sub menu height to auto?

Here is my css: http://ling.twinner.com.tw/uselink/menu_style.css

Any suggestion is greatly appreciated.

I am working on a web page, and am all but done, but I am having one final problem with it. The css drop down menu works fine except for one issue... when you scroll down on one of the pages, and then go to the css menu bar a gap appears between the menu bar and the sub menu options that drop down.

How can I get this menu to always drop down DIRECTLY below the main menu bar without the gap?


___________


Here is the SpryMenuBarHorizontal css

_____________

@charset "UTF-8";

/* SpryMenuBarHorizontal css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
padding-left: 0px;
padding-right: 0px;
position: relative;
background-image: xxx;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug:
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 16px;
position: relative;
text-align: center;
cursor: pointer;















width: ;
float: left;
background-image: xxx;
padding-left: 0px;
padding-right: 0px;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8em;
position: fixed;
left: -1000em;
background-image: xxx;
padding-left: 0px;
padding-right: 0px;

}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 9.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;

}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 0px solid #000000;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
color: #2C2A2B;
text-decoration: none;
padding-left: 24px;
padding-right: 24px;
padding-top: .5em;
padding-bottom: .5em;
background-repeat: repeat;
background-image: xxx;

}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
color: #FFF;
display: block;

}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
color: #FFF;
display: block;

}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: XXX;
background-repeat: repeat;

}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: XXX;
background-repeat: repeat-x;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{

}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: xxx;
background-repeat: no-repeat;
background-position: 95% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}


Thank you so much for your help, I have a deadline that is coming up very quick... I'd appreciate any help I could get.

_______________

my css is sloppy , but at this point with the deadline approaching, I really just need to get this to work properly, and I have a feeling its as simple as a few lines of code changed....

Code:

<form action="">
  <div>
    <select id="about_menu" name="about_menu" 
	   onchange="window.location.href=this.form.about_menu.options[this.form.about_menu.selectedIndex].value;" 
	   title="Go to About pages">
      <option value="">About</option>    
      <option value="http://myblog.com/about-the-blog/">About The Blog</option>
      <option value="http://myblog.com/welcome/">Welcome</option>
    </select>
  </div>
</form>

I use <option value="">About</option> as self labeling.
I would like the width of the form to be so that there won't be a blank after About even if other options are longer.
The issue is that About is going to be translated in several languages and thus I can't rely on a determined value for the width.

This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE.

Code:

<style type="text/css">
   divBlackBox1
   {
     margin: 50px auto;
     padding: 0px;
     width: 400px;
     height: 4px;
     display: block;  /* for IE stupidity (to make height work correctly with the correct pixels)... */
     font-size: 1pt;  /* for IE stupidity (to make the smaller height work due to default font-size)... */
     overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */
     background-color: #000000;
   }
</style>

<div class="divBlackBox1"></div>

Thanks,
FletchSOD

Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve.

My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it.

It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists.

Can anyone help?

Cliff

I have that annoying problem that code like this:

PHP Code:
<img src="images/worsleytop.jpg" width="750" height="175" />

<div id="navigation">

<ul id="nav"> 

  <li> 





Causes a gap between the image and the navigation div of a couple of pixels. I know why it is happening. And I know that changing it to

PHP Code:
<img src="images/worsleytop.jpg" width="750" height="175" /><div id="navigation">

<ul id="nav"> 

  <li> 





fixes the problem in IE, but not in firefox. How do I sort it out universally?