5 replies [Last post]
soel
Offline
Regular
Last seen: 18 years 11 weeks ago
Joined: 2004-03-12
Posts: 12
Points: 0

Hi, I need your help css gurus. I am making a page for the csszengarden and before I submit it I want it perfect. I have it up for you to look at here...

http://www.designerdvds.com/zengarden/

you can view the css file here....

http://www.designerdvds.com/zengarden/sample.css

It looks perfect in the latest Netscape and Opera browsers. But in IE it has a little bit of a problem. The padding between the paragraphs is messed up and the container for "So What is This About" is going too wide (as well as everything below it).

If you look at it you will see what I am talking about. Netscape & Opera = Good. IE = Bad.

Any suggestions...? I thank anybody who takes the time to help me.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Need CSS Guru Help!! I've wasted hours and no solution...

Hi Soel,
The structure of the document is

<div id="container"> 
	<div id="intro"> 
		<div id="pageHeader"> 
			</div> 
		<div id="quickSummary"> 
                        </div> 
		<div id="preamble">		 
		</div> 
	</div> 
	<div id="supportingText"> 
		<div id="explanation">			 
		</div> 
		<div id="participation"> ...
Where intro and supportingText are at the same level. Yet you have applied the css differently to both. To cut a long story short, if you apply the margin to #explanation and #participation etc instead of #supportingText you should fix the width problem.
#explanation, #participation { 
	width: 440px; 
	margin: 0 0 0 215px; 
	background-color: #C5DDE2;	 
}
Something you should also consider is the use of classes, you can have a class and an id for each element and then reuse the classes to minimize you CSS file.

Hope that helps

soel
Offline
Regular
Last seen: 18 years 11 weeks ago
Joined: 2004-03-12
Posts: 12
Points: 0

thanks

Thanks for your help Tony. That is exactly how I had it before I got desparate and was trying everything too fix it Oups . It still doesn't work and I have no idea why. I uploaded the changes you suggested so you could see. Does anybody have any ideas?? Thanks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Need CSS Guru Help!! I've wasted hours and no solution...

Hi soel,
I don't know why this is but if you comment out the acronym below from p1 of #participation the right edge is fixed.

skills are necessary, but the example files are commented well enough that even  
           <acronym title="Cascading Style Sheets">CSS</acronym>

Also one of the width were set wrong possibly in an attempt to fix the previous problem.
Here is away to simplify your CSS
#preamble, #explanation, #participation, #requirements, #benefits { 
	background-color: #C5DDE2; 
	width: 440px; 
	padding: 0; 
	margin: 0px 0 0 215px;	 
	background-repeat: no-repeat; 
	background-position: 1px 0px; 
	padding: 20px 10px 5px 10px; 
	text-align: justify; 
	line-height: 15px;	 
} 
 
#preamble {background-image: url(enlighten.jpg);} 
#participation {background-image: url(participation.jpg);} 
#benefits {background-image: url(benefits.jpg);	} 
#explanation {	background-image: url(whatis.jpg);} 
#requirements {background-image: url(requirements.jpg);} 
Hope that helps

soel
Offline
Regular
Last seen: 18 years 11 weeks ago
Joined: 2004-03-12
Posts: 12
Points: 0

Tony is the man!

How you came up with that fix is beyond me! I am not sure exactly what you meant with "comment out the acronym". Maybe this, /* */ ? But, I am not alowed to touch the html file, I can only modify the CSS file. So, what I did was make the acronym font sizes smaller and presto chango its is fixed! WEIRD! One more question. How do I get the space between the headers between the paragraphs the same for each browser? The menu styled ok but the paragraphs didn't. A link to some resources would be fine if you know of any, I know you have spent a lot of time helping me. Thank you so much Tony, I'M NOT WORTHY!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Need CSS Guru Help!! I've wasted hours and no solution...

Hi soel,
Glad you found a fix.
To comment out html use <!-- -->,
but you no longer need to do that.

Try using margins instead of padding to fix the paragraph spacing.