CSS - Css - Display Changes When No Info In Html

I defined several css styles to be nested within an overall "pageBlock" style and some of the nested divs don't seem to revert to the settings of the parent pageBlock div after a </div>. Safari is the only browser that does what intuitively I think should happen. IE, OmniWeb, FireFox, iCab all do their own squirrely things.

In general though, in all browsers except Safari, elements are being positioned not relative to the parent (pageBlock) but relative to left edge of the item directly above them. This causes them to get farther and farther from the left edge of the page the more blocks are used.

Is this rightward creep what's "supposed" to happen and it's Safari that's getting it "wrong"?

Thanks

Ken


Here's the styles:
Code:

.pageBlock  { 
	margin-right: auto; 
	margin-left: auto; 
	top: 32px; 
	width: 80%; 
	height: auto 
}

.indentBlock { 
	color: black; 
	font-size: 14px; 
	line-height: 18px; 
	font-family: "Times New Roman", Georgia, Times; 
	text-align: left; 
	padding-bottom: 4px; 
	position: relative; 
	top: 8px; 
	left: 32px
}

.imageBlock { 
	padding-bottom: 8px 
}

And here's how I'm using them...
Code:

<div class="pageBlock">
	<p>bla bla bla</p>
	
	<div class="indentBlock">
		<p>rah rah rah</p>
	</div>
	
	<p>cha cha cha</p>
	
	<div class="indentBlock">
		<p>rah rah rah</p>
	</div>
</div>

I've been seeing people using ul and li tags to make their menus in css.

So I've started trying to do the same, here is an example.

But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working?

How can I get this to work or is there any other way to get a ul li menu to display this way?

Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either.

http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm

Hi!

Is is vicious to display a table as "display: block" to force margin-collapsing?

Otherwise there's no margin collapsing with other elements.

Thanks

Hi,

I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink.

(For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input).

I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future.

I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers.

For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser.

Any hint or suggestion ?

I'm working on a new site, and having trouble getting the CSS to work with IE7 (big surprise), it works fine in Firefox (big surprise).

You can see the site he http://www.gocubit.com
CSS he http://www.gocubit.com/styles.css
IE6 stylesheet he http://www.gocubit.com/ie.css

The problem is very simple, so let me explain what I have setup, and what is happening.

I have 4 backgrounds I want to display, in the following containers:

body - this contains a tiling wall texture

#outerWrapper - this contains a small non-repeating bg image that puts graffiti in the upper right corner on top of the wall bg

#innerWrapper - same as outerWrapper, but puts a graffiti bg in top left

#contentWrapper - this div contains the main display area, and displays a vertically repeating paper background that should fill the screen from top to bottom (on top of the wall and two graffiti backgrounds)

I've tried my best to get this to display right, but have one of two problems depending on how it is set up. In all cases, BODY and HTML are set to 100% height.

SCENARIO #1 (same problem in FF or IE7):
I set outerWrapper, innerWrapper, and contentWrapper to min-height: 100%.

This doesn't extend the paper background all the way to the bottom on pages that don't fill the screen with content (see the CONTACT page).

SCENARIO #2 (works in FF):
I set outerWrapper, innerWrapper to height: 100%, and contentWrapper to min-height:100%.

This actually appears to work on first glance (and does work in FF). But, if you go to a page with a lot of content (see the SERVICES page) where you need to scroll, what happens is that there is no paper BG in the area that is off screen. The content "below the fold", when scrolled to, has no paper BG. It's setting the height of the div to the screen height, filling in the BG, and any content below that height has no BG (only the wall BG in the body element).

Code:

html { height: 100%; }

body {
	background-color: #8d7c51;
	background-image: url(images/bgStucco.jpg);
	font-size: 12pt;
	margin: 0;
	padding: 0;
	height: 100%;
}


#outerWrapper {
	background-image:url(images/bgStucco_tr.jpg);
	background-repeat:no-repeat;
	background-position: right top;
	width: 100%;
	margin: 0;
	padding: 0;
	min-height: 100%;
}

#innerWrapper {
	background-image:url(images/bgStucco_tl.jpg);
	background-repeat:no-repeat;
	min-height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

Code:

<body><div id="outerWrapper"><div id="innerWrapper"><div id="contentWrapper">
CONTENT GOES HERE
</div></div></div></body>

Any ideas on how to get this to work?

Hello all,

I feel like such a dumb a$$ for not figuring this out...

I have a div with ID head and width 100%; In that div there are 4 elements, 2 images and two header ( h1 and h2 ) elements. The two gifs are positioned absolutely one top:0;left:0; and one top:0;right:0;

The parent div is set to min-height & height of 160px; The height of the images.

In firefox they display where you would expect them, top right and left corners. In ie 5,5.5, 6 and 7 they just don't display at all.

Here is some code:
CSS Code:
Original - CSS Code #head{ text-align:center; clear:both; width:100%; min-width:100%; max-width:100%; min-height:160px; height:160px; } #img1{ position:absolute;top:0;left:0; } #img2{ position:absolute;top:0;right:0; } #head1{ clear:none; width:100%; min-width:100%; max-width:100%; } #head2{ clear:left; margin:0; width:100%; min-width:100%; max-width:100%; }

  

 #head{


     text-align:center;


     clear:both;


     width:100%;


     min-width:100%;


     max-width:100%;


     min-height:160px;


     height:160px;


 }


 #img1{


     position:absolute;top:0;left:0;


 }


 #img2{


     position:absolute;top:0;right:0;


 }


 #head1{


     clear:none;


     width:100%;


     min-width:100%;


     max-width:100%;


 }


 #head2{


     clear:left;


     margin:0;


     width:100%;


     min-width:100%;


     max-width:100%;


 } 

HTML4strict Code:
Original - HTML4strict Code <link type="text/css" rel="stylesheet" href="default.css" /> </head> <body> <div id="head"> <img id="img1" src="img1.gif" alt="an animated gif"> <h1 id="head1">h1</h1> <h2 id="head2">h2</h2> <img id="img2" src="img2.gif" alt="an animted gif"> </div>

  

 <link type="text/css" rel="stylesheet" href="default.css" />


 </head>


 <body>


 <div id="head">


 <img id="img1" src="img1.gif" alt="an animated gif">


 <h1 id="head1">h1</h1>


 <h2 id="head2">h2</h2>


 <img id="img2" src="img2.gif" alt="an animted gif">


 </div> 

Edit: Nevermind, I fixed my problem by working through each issue that the W3C validation service gave me, and fixing each one. It works in Internet Explorer now. Thanks for your time anyway.

Peace,
Pete Zaria.

Hey all
I'm having a little trouble with my web site, which I have been attempting to make "css-based" and "tableless." The problem that I am having is that there are quite a few small but frusterating differences between how the page displays in IE and Mozilla Firefox (i tend to beleive that ie, the non-standards browser is wrong).

Anyway, to the problem. If you view this site:

http://trinity.killagraphix.com/index.php
Css: http://trinity.killagraphix.com/theme.css (i didn't want to paste the whole file as it is quite large)

In Internet explorer, you get a small margin between the Header image, and the rest of the content. This is not here viewing the same page in Mozilla.

Also, in both browsers the menu background image is slightly above the center of the line. I think this is because the image is not as big as the line size, is there a way to make the image (which is a css background property) appear vertically-aligned to the center?

Thanks in advance, sorry for the post length

Hi guys,

Just a quickie , I was looking at a site I produced in Netscape Navigator 7 and noticed a problem.

I have a left hand nav that expands to show a sub Nav on mouse over. When moving your mouse off the menu item onto another one the previous menu closes (unless it's the page your looking at)

Simple right? - well I noticed in NN7 that the display:none; I use to close the menu does not seem to work. No error, just doesn't work.

Does display:none; not work in NN7 then? Is there a way arround it?

Cheers,

Daz

I need some assistance getting my site menu to display correctly on FF. It displays fine on IE.

You can see an example of the page he http://www.gallery.vividusphoto.com. If viewed in FF, the menu table is touching the logo. In IE, the menu is aligned to the right. If I do an align="right" the "under construction" bar goes up under the logo/menu in FF and the menu is moved to the correct position all while IE is unchanged. Any help is greatly appriciated.

Code:

@charset "utf-8";
/* CSS Document */
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #333333;
}
.vividus #container {
	width: 46em;
	margin: 20px auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.vividus #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #333333;
	height: 30em;
}
.vividus #headerContent {
	width: 46em;
	text-align: right;
	color: #CCCCCC;
}
.vividus #footerContent {
	width: 46em;
	padding: 10px 0 0 0;
	text-align: left;
	color: #CCCCCC;
	font: 75% Georgia, "Times New Roman", Times, serif;
}
.vividus #menu {
	width: 30em;
	border: 0;
	margin: 15px 0 5px 0;
	text-align: right;
	font: 75% Georgia, "Times New Roman", Times, serif;
}
a:link {
	color: #CCCCCC;
	text-decoration: none;
}
a:visited {
	color: #CCCCCC;
	text-decoration: none;
}
.login {
	background: #000000;
}
.login a:hover {
	text-decoration: none;
	color: #999999;
}
.newsBanner a:hover {
	color:#FFFFFF;
}
.vividus #newsBanner {
	background: #666666;
	padding: 7px 15px 7px 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #CCCCCC;
}
.vividus #realContent {
	background: #FFFFFF;
	margin: 10px 0 0 0;
	height: 30em;
	padding: 10px 15px 10px 15px;
}
.vividus #realContentHome {
	background: #666666;
	margin: 10px 0 0 0;
	height: 30em;
	padding: 10px 10px 10px 10px;
}
.vividus #bodyHeadline {
	color: #000000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: .8em;
	padding: 10px 0 0 0;
}
.vividus #bodyText {
	color: #000000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: .8em;
}
.vividus #loginForm {
	padding: 5px 0 5px 0;
	border: 1px solid #000000;
}
.vividus #bodyHeader {
	font-size: 2em;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.floatright {
	float: right;
	margin: 10px 0 10px 10px;
}
.vividus #imgAbout {
	height: 30em;
	background: top right no-repeat url(../images/about_img.jpg);
}
.vividus #bodyHeadlineAbout {
	color: #000000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: .8em;
	padding: 10px 0 0 0;
	width: 35em;
}
.vividus #error {
	color: #FF0000;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: .8em;
	padding: 10px 0 0 0;
	width: 35em;
}
.green	{
	background:#333333;
	margin: 0px 6px 6px 6px;
	border:1px solid #3b6e22;
	height:24px; 
	line-height:14px;
	color:#FFFFFF;
	font-size:12px;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin-right:10px;
	display:inline-block;
	text-decoration:none;
}
.login2 { 
 	width: 200px;
	font-size: 1.1em;
	font-family:Georgia, "Times New Roman", Times, serif; 
 	background-color: #FFFFFF; 
 	color: #102132; 
	border: 1px solid #284279; 
}

Hi

Hoping someone can give me a pointer to a small problem I'm having:

Trying to achieve rounded corner buttons for a tags on a website using CSS and a nested <span tag.

Relevant example page is at:
http://www.mytophost.co.uk/test/test.html

Styles are in the test.html page and the images used are at:
http://www.mytophost.co.uk/test/button.gif
http://www.mytophost.co.uk/test/buttonh.gif
http://www.mytophost.co.uk/test/end.gif
http://www.mytophost.co.uk/test/endh.gif

All looks fine for me in IE, but bg images align differently in FF.

I realise it's probably something in my CSS that's not compliant and so that's why IE works and FF not ...

Any help greatly appreciated.

Hi there,

Please help me with the CSS on my website, http://www.tophatweddings.co.uk

On the home page I am trying to display a product feed as rows of 3. However, you will notice that sometimes it will force a new line. I do not understand what is causing this

The class being applied is he

Code:

#productDisplay li 
{
	float:left;
	width:165px; 
	padding-right:10px;
	padding-bottom:10px;
	padding-top:10px;		
}

Please help oh wise CSS gurus
What should I try?

I'm having some issues with website I'm putting together. Don't flame me for the code, it started as exported code from Photoshop. I need to get it up quick, after that, I'll convert it over to full CSS.

http://www.foltzconstruction.com

Try navigating to one of the subpages. Everything displays perfect in FF, but wrong in IE.

Anyone got any clues as to why?

I've attached my CSS file to make your life a little easier.

Thanks, guys.

I have this CSS for my "globalNav" class:

.globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px}

.globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block}

This is my code for globalNav:

<div class="globalNav">
<a href="#">Global 1</a>
<a href="#">Global 2</a>
<a href="#">Global 3</a>
<a href="#">Global 4</a>
<a href="#">Global 5</a>
<a href="#">Global 6</a>
</div>


For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work?