CSS - Making Things Appear And Disappear Simply

Hi,

i made a page with DIVs and floats and all that and everything is peachy.
i got myself an ecommerce solution, re-designed the interior to be tableless and now have a problem with IE that i cannot seem to get rid off.
live example: www. chocolateriewanders.com/shop

- the 3 floated images leave the div in IE (do not wrap) [thats the smaller problem]
- if you click on 'Gift Boxes', then the content is moved down quite a bit opposed to the looks in Firefox, were its all aligned correctly.

i tried to apply the holly hack - but i am not very comfortable with it.

right now the 'shop' site does not validate and i have no idea why either (html validation)

If someone could help me out, that would be great
(and yeah i want to succeed in validation too! but this shop is pretty crazy put together and i have no clue about php and whatnot it utilizes .... btw, most pages are put together with php from a database and TPL files, which i can edit)

I picked up the unitpngfix.js that was released recently because it's smaller, less complicated, and fit my needs better than the Twin Helix fix. (Twin Helix released an updated Alpha version 2 days ago that supports background-repeat and background-position!)

Anyway, when the unitpngfix.js is fired upon site load, most of my content disappears. The general layout remains basically intact, but everything inside does not show. The IE developer toolbar outlines the divs in the upper-left hand of the page. I was shooting back and forth a few emails with the creator of the script, and he said that it happens when the Javascript is fired. The script goes through and changes most position:static elements to position:relative. He was not sure why it was effecting my page that way, because he said that how elements display should not change based on position:relative or position:static (default).

I'm working on getting a test site up shortly and will edit the post accordingly. But does this sound familiar to anyone?

hi,

i am setting up a webstore with php and css and all that.
FF is just fine and i love it.
IE is a bad bad bad boy and does weird things when hovering over a button, like it makes the background of a certain object disappear ... when you scroll down the page just a little and then hover over the same button it re-appears.

please someone tell me that it is not just me going nuts here?
if i cannot resolve this issue, i am kinda forced to use tables and all this stuff i do not want to use, because i invested sooooo much time into this ...

uh well, here is the url: www.chocolateriewanders.com/store

and please - no purchases (yet) .... the whole payment thing is a worry for itself

Hi, I'm trying to work a bit with divs

Anyway, I got this atm:

Code:

#container {

margin: 0px auto;
width: 600px;
}

#menu-left {
float:left;
height:auto;
width:100px;


}

#menu-right {
float:right;
height:auto;
width:100px;


}

#content {
float:left;
width:400px;
top: 200px;

}

#article { background-color:#999999;
border:dashed 1px black; 
float:none;
width:380px;
height:100px;
margin: 0 10px 0 10px}

So I got a container around all the other divs, 1 div on the left (menu-left), one on the right (menu-right) and inbetween them the (content) div. In the content I got the (article) div, I want to have more of those underneath eachother after a while. Now normally the width of the Article div would equal 400 as well and fit perfectly between menu-left and menu-right. Yet it doesnt fit PERFECTLY inbetween them. If I take 8px margin on the left it fits, how is this possible??

___ EDIT ___
Without the 1px border it seems to fit, but why doesn't it fit WITH the border?


Thanks!

Here is my css code: Code:

 body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

#sidebar {
	float:left;
	width:140px;
	height: 100%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	padding-right: 10px;
	margin: 10px 10px 10px 0px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sidebar a:link, #sidebar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sidebar a:hover, #sidebar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sidebar ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

Here is my html code: Code:

<body>
	<div id="page">
		
  <div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" />
  	<span class="tagline">world leaders in spirometry</span></div>
	
  <div id="topbar">
  	<ul>
		<li><a href="/home.html">Home</a></li>
		<li><a href="/about_us/about_us.html">About Us</a></li>
		<li><a href="/other_regions.html">Other Regions</a></li>
   	</ul>
  </div>
  
  <div id="sidebar">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Contact Us/Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  
</div>
</body> 

If it is more helpful -

This is a link to the actual html file to view

I am going to turn it into a template with an editable main section (the large blank area to the bottom right. I think my problems are all with the sidebar id - but I could be wrong as this is my first attempt at css and tabless design.

Ignore the search part - that is phase 2 so I am not messing with that at this point.

Here are the problems I am trying to correct:

1) I want the sidebar column to extend to the bottom of the page container - 10px. Some page containers could be longer than 600px height - but that will be the minimum height of the container. Currently it goes down all the way to the page id border with no white space.

I know this is because I put in height 100% - but what I really need is something like 100% - 10px - but that doesn't seem to be an option. The page container has 10 px padding but it doesn't seem to be making a difference.

2) The left side list navigation indentation has some problems. See the side bar here to see what I want it to look like

The list navigation part should be indented 20px from the left edge of the sidebar (10px more than the category class). Currently in fox fire they are both 10px from the right edge.

In IE they are indented way too much.

As always any help is greatly appreciated.

Thanks!

I am redesigning this site in a css layout, and I've had minimal problems so far, but IE:mac (of course) is doing some weird things.

Example One:

The header of the search box is stretching to the right, when the googleads box is floated right.

Eample Two:

The ul in the left side bar is placing the bullets outside of the wrapper and is aligned to the left side of the browser. The rollovers have also been slow in other browsers.

These are my two main issues. If there are any other suggestions as to how I could lay this out more efficiently, it would be much appreciated. Thanks!

Site

CSS

I am honestly trying to do this thing with CSS but CSS does not seem rational.
I had some nested div elements now I thought that position relative
was with respect to the parent. So if I put position: relative; left:100px; top: 8px on the red one it will be close to the top of the parent (the blue one) and 100 px over from the left. Then if I do the green div the same except top: 22px it will be right below the red one. I know divs make a new line but they were skipping a line. So I turned them into spans. now it starts the second one at the right place top to bottom, but left to right it starts where the last one left off. And now here's an even harder question, I guess without using zindex they won't overlay, right? and centering is just out of the question...

Code:

 <div> 
    <div> </div> 
    <div> </div> 
 </div> 

Here is some sample actual code: http://www.colleenweb.com/onetix.html

It doesnt have all the normal styles but it shows the problem very clearly.
If you look at the code it should be pretty clear what I intended.
Please tell me why the position specifications are being ignored.

And problems are compounded when you try to print it, it makes the graphic background bigger and cuts it off. If you just print the graphic it is fine. I gave up with the transparent for now because this has to work tomorrow, and just made a hard coded blue one but eventually I'd like to address that too.

I need to be able to make these look acceptable both for screen and print.
I never had these problems when I did everything with tables. This is why people don't learn CSS.

I just spent an hour putting this together and previewing it in IE... then when i go over to my mac and preview in safari.. UGH!!! UGLY!... Then in firefox.. UGLY!.. Any help would be appreciated.

Page is:
reston.com/RESTON20/


Code:

@charset "utf-8";
/* RestonCOM 2.0 CSS */
/* 10/04/2008 */

/* Main Container Code */
#container{
height: inherit;
width: 1000px;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px double rgb(74,77,144);
border-left: 1px double rgb(74,77,144);
border-right: 1px double rgb(74,77,144);
}

/* HEADER CODE */
#header{
height: 149px;
width: 1000px;
background-image:url(COM20-BANNER.png);
}

/* NAVIGATION CODE */
#navi{
height: 25px;
width: 995px;
background-color: #44478a;
margin-bottom: 1px;
margin-top: 0px;
margin-left: 2px;
padding-left: 2px;
padding-top: 2px;
color: #FFFFFF;
}

/* LEFT SIDE PANEL CODE */
#leftbar{
height:inherit;
width: 270px;
background-color:#FFFFFF;
float: left;
margin-left: 1px;
}

/* LEFT-BOX CODE */
#leftbox{
height:inherit;
width: 281px;
background-color: #FFFFFF;
float: inherit;
border: 1px double rgb(74,77,144)
}

/* LEFT-BOX-TITLE CODE */
#leftbox-title{
height:inherit;
width:281px;
background-color: #44478a;
float: inherit;
color: #FFFFFF;
}

/* MIDDLE CONTENT CODE */
#content{
height: inherit;
width: 712px;
background-color:#FFFFFF;
float: right;
padding-left: 1px;
}

/* MIDDLE-CONTENT HEADERS */
#content h1{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:16px;
color:#000000;
font-weight: bold;
display: inline;
}
#content h2{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:12px;
color:#44478a;
font-weight: bold;
display: inline;
}

/* NEWSFLASH - BOX */
#newsflash{
width: 700px;
background-color:#000000;
}

/* NEWSFLASH - LEFT */
#newsflash-left{
width: 349px;
background-color:#44478a;
color: #FFFFFF;
float: left;
padding-left: 1px;
}

/* NEWSFLASH - LEFT - BOX */
#newsflash-left-box{
width: 345px;
background-color:#FFFFFF;
color: #44478a;
border: 1px double rgb(74,77,144);
float: inherit;
}

/* NEWSFLASH - LEFT - IMAGE */
#newsflash-left-image{
width: 50px;
height: 50px;
background-image: url(NEWSFLASH-LEFT-IMAGE.png);
float: left;
border-right: 1px double rgb(74,77,144);
}

/* NEWSFLASH - LEFT - TEXT */
#newsflash-left-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}

/* NEWSFLASH - RIGHT (EVENTS) */
#newsflash-right{
width: 357px;
background-color:#44478a;
color: #FFFFFF;
float: right;
padding-left: 1px;
margin-right: 1px;
margin-left: 1px;
}

/* NEWSFLASH - RIGHT (EVENTS) IMAGE */
#newsflash-right-image{
width: 50px;
height: 50px;
float: left;
border-right: 1px double rgb(74,77,144);
background-image: url(NEWSFLASH-RIGHT-IMAGE.png);
}

/* NEWSFLASH - RIGHT (EVENTS) TEXT */
#newsflash-right-text{
width: inherit;
height: inherit;
float: inherit;
font-size: 9px;
}

/* NEWSFLASH - RIGHT - BOX (EVENTS) */
#newsflash-right-box{
width: 357px;
background-color:#FFFFFF;
color: #44478a;
float: inherit;
border: 1px double rgb(74,77,144);
}

Code:

<!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" />
<title>Reston.com (2.0)</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">

<div id="header"></div>
<div id="navi">Navigation</div>
<div id="leftbar">
<script src="http://arestravel.com/js/_default/ARESbot.js?bundle=reston&ro=1" type="text/javascript"></script>
<div id="leftbox">
<div id="leftbox-title">Sponsored Advertising</div>
<script type="text/javascript"><!--
google_ad_client = "pub-8246327012745782";
/* 250x250, created 10/4/08 */
google_ad_slot = "2128673963";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
</div>

<div id="content">
<div id="news-flash">

<div id="newsflash-left">Newsflash
<div id="newsflash-left-box">
<div id="newsflash-left-image"></div>
<div id="newsflash-left-text">This will be a description of the latest news article on our website. This will be a description of the latest news article on our website. <br /><strong>More</strong> </div>
</div>
</div>

<div id="newsflash-right">Upcoming Event
<div id="newsflash-right-box">
<div id="newsflash-right-image"></div>
<div id="newsflash-right-text">This will be a description of the latest upcoming event in Reston Virginia.  This will be a description of the latest upcoming event in Reston Virginia. <br /><strong>More</strong></div>
</div>
</div>
<br />
<br />
<strong><h1>Your guide to working, living, and playing in Reston Virginia!</h1></strong>
<br />
<br />
<h2>Reston Hotels</h2> - Stay in Reston!  The hotels in the Reston area offer a full range of accommodations including luxury hotels and options for those on a budget. Conveniently located right off the Dulles Toll Road, just 15 minutes from Dulles International Airport, Reston is nearby most businesses in the area and within driving distance to Washington D.C.

<br />
<br />
<h2>Reston Restaurants</h2> - Dine in Reston!  Reston offers some of the best dining alternatives in Northern Virginia.  Whether you're planning a romantic dinner, hosting a business gathering, grabbing an afternoon snack, celebrating a special occassion, or having a night out with the family, Reston's restaurants can meet your needs.

<br />
<br />
<h2>Reston Town Center</h2> - Reston's famous "downtown" includes many shops and restaurants, ice skating, a multiplex movie theater, and a luxury hotel.  Reston Town Center hosts outdoor festivals and concerts throughout the year, and features outdoor ice skating during the winter months.  

<br />
<br />
<h2>Village Centers</h2> - Explore Reston's village centers!  Reston's community village centers each has its own special character and  include shops, parks, lakes, walking and bike paths, art galleries, restaurants, museums, theaters, and much more. 

<br />
<br />
<h2>Reston Real Estate</h2> -  Reston is a world renowned planned community and was recently ranked one of the top 100 Best Places to Live in America by Money Magazine. Reston's diverse selection of housing includes condos, apartments, townhomes, and single-family homes. Lakefront properties are also available.</div>
</div>

</body>
</html>

i wanted to create a new thread because the new problems are not same as the one in my other thread so i thought best to create a new post.

Site url: www.plumstead-mosque.co.uk

Problem1: if you have the developer's extension for Firefox turn on the display>information>block size (useful for reference) and you will see that form starts right near where the UL/lists/menu starts and not after the menu which is strange

Problem2: when i try adding border to the whole form element the border only appears on the label and not the input & submit button
similarly that donate button is also a form but border isnt going around it...

problem3: submenu font appears a bit smaller (in IE)

problem4: when you hover over a menu link, the link turns a diff color and in FF you can go past the text and the cursor will remain in the "link" mode ie a hand but in IE if you hover past the text although the background color will remain the cursor will revert back to normal non-link mode

problem5: if you do the css developer thing again, you will see that for some reason firefox makes items on left side appear to go out of screen ie making it seem as if the width of items is larger then what it seems

Well I'm pretty uneducated in CSS, I have just played around with it hours and hours and always figured out what I was trying to do. But right now I am stumped. Please view the following page in FireFox if you have it:
http://www.iqdrop.com/newiq/index.php
Then in IE

You see the Google ad is dropped way down in IE for some reason and overlaps my menu, and the <DIV> containing the word "index.php" is also taller in IE.

I'm not sure what is wrong and I've been trying all sorts of things with no luck. Thanks for any help.

I'm pretty new to CSS (only just begun). I've been teaching myself using a number of resources, but I realise the best way to learn is to practice. I just don't think I'm doing it right.

I want to have the main content of the page floating in the centre of the window, which works in IE but not firefox or opera.

I also want san serif fonts, but these also aren't being displayed in Opera or Firefox.

Any ideas?

Here's the code:
Code:

/*** TEXT AND TAG STYLES ***/

body {
	font:Geneva, Arial, Helvetica, san-serif;
	color:#000000;
	text-align:center;
	background-color:#003366;}

h1 {
	font:Geneva, Arial, Helvetica, san-serif;
	color:#336699;
	text-decoration:underline;}

h2 {
	font:Verdana, Arial, Helvetica, sans-serif;
	color:#336699;
	text-decoration:none;}
	
h3 {
	font:Verdana, Arial, Helvetica, sans-serif;
	text-decoration:none;}

a {
	color:#3366CC;
	text-decoration:none;}

a:link {
	color:#3366CC;
	text-decoration:none;}

a:hover {
	color:#336699;
	text-decoration:underline;}

ul {
	list-style-image:url(../images/bullets/bullet1.gif);}

ul ul {
	list-style-image:url(../images/bullets/bullet2.gif);}

em	{
	color:#336699;
	text-decoration:none;
	}

/*** PAGE DIVISIONS ***/

#container {
	width:772px;
	height:600px;
	top:7px;
	text-align:left;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	background-color:#FFFFFF;
	padding: 10px 10px 10px 10px;}
	
#masthead {
	height:100px;
	width: auto;}
	
#navbar {
	position:relative;
	top:2px;
	width:auto;
	height:15px;
	padding: 3px 6px 3px 6px;
	border-top: 2px solid #000033;
	border-bottom: 2px solid #000033;
	background-color:#336699;
	color: #FFFFFF;}
	
#content {
	position: relative;
	top: 2px;
	border-color:#336699;
	border-style:groove;
	border-width:1px;
	width: auto;
	height: 438px;
	padding: 10px 7px 10px 12px;}

.piece {
	position:relative;
	float:left;
	width: 522px;
	height: 422px;
	z-index: 1;
	padding: 12px 6px 3px 12px;
	border: 1px solid #000000}

.rightspace {
	position:relative;
	top: 0px;
	float:right;
	width:190px;
	height:422px;
	z-index: 2;
	background-color:#CCCCCC;
	padding:12px 6px 3px 8px;}
	
#bottombar {
	height: 12px;
	margin-top: 12px;
	top: 12px;
	border-top: 1px solid #333399;
	background-color:#00FF33;}

also, i don't think i'm using classes properly, but I think I just realised that.

midgetporn

So this site is having a bit of trouble in WinIE 6.0. If you resize the window after you load the page, the dark brown area behind the content sort of gets stuck on the right.

I'm wondering if it might have something to do with the javascript I had to do to get IE to recognize fixed backgrounds.

Any ideas?

Site: http://dev.sabotagemedia.com/firstclass/
CSS: http://dev.sabotagemedia.com/firstclass/_css/style.css

I am currently having to deal with a mystery padding at the bottom of each of my im_container tags... everything is set to 0px, and oddly enough... it looks GREAT in IE (ugghh... i can't believe i just said that)... it doesnt however look good in firefox... whats up... here is the XHTML followed by the CSS..

Code:

<div class="im_left">
	<div class="im_container">
		<div class="im_logo"><img src="/images/im_icq.gif" alt="Contact Via ICQ" /></div>
		<div class="im_info">
			164149536
		</div>
		<div class="clear"></div>
	</div>
	<div class="im_container">
		<div class="im_logo"><img src="/images/im_aim.gif" alt="Contact Via AIM" /></div>
		<div class="im_info">
			Incomplete Gamer
		</div>
		<div class="clear"></div>
	</div>
</div>

Code:

.im_left {float:left; width:270px;}		
	.im_container {
	margin:0 0 0 30px !important;
	border:1px solid #900;
	}
		.im_container a:link,
		.im_container a:visited,
		.im_container a:active,
		.im_container a:hover {color:#FFF;}
		.im_logo {
		margin:0px 0 0 0;
		float:left;
		width:30px; margin:0px; padding:0px;
		}
			.im_logo img {border:0px; margin:0px; padding:0px;}
		.im_info {
		font-size:12px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		margin:0 0 0 5px;
		text-align:justify;
		width:200px;
		float:left;
		}
			.im_title {
			text-align:center;
			font-weight:bold;
			}

hello, this is my first post so apologies if i give too much information, but rather than miss something crucial, i thought it best to cover all my bases.

i am new to CSS and have been trying to reproduce a design that i created as an image, in CSS for a website layout. i have managed the 'bones' of the website but am having difficulty when i get to the actual content.

not being the most technical when it comes to CSS terminology, i have uploaded an image which shows what i want it to look like

here

a cut down version of the page, including just the area in question is available here

XHTML

css

i validated my xhtml, but the css came up with warnings but didn't say it was invalid. i hope this is OK?

in firefox it looks fine, but in IE 6, you can see that the photo of the product is not flush to the left of the bordered div. i'm not sure if i have gone about it the wrong way or if it is IE.

a friend suggested that rather than have the 2 divs overlapping, i should just use a background image to create the effect, but being stubborn, i would like to try to fix this way, just for experience.

would anyone mind having a look?

hopefully i have provided enough info, but apologies if not. just ask and i will do my best to explain.

thank you for your time

J