26 replies [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Hi,
If someone can help me figure out this issue, I would greatly appreciate it. I created a an elastic website using ems as my measurements. However, the design gets completely messed up when the user zooms in or out. The url address is www.newstylesignsusa.com {Mod note: please check links work}
This is the css for my template. The css for all the inside pages have all measurements in ems as well.
Any help would be greatly appreciated.
Thank you!!

body{
margin:0 auto;
padding:0em;
background: url(images/bg_gradient_bar.jpg) repeat-x top left #99cccc;
font-size:1em;
}

.clear{
clear:both;
}

/*===============
simple selectors
====================*/

p{
font-family:Arial, Helvetica, sans-serif;
color:white;
float:right;
margin-top:-0.625em;
margin-right:0.75em;
padding:0em;
font-size:1.125em;
}

img{
margin-top:-1.875em;
}

ul{
margin-top:0em;
margin-right:0.6em;
list-style-type:none;
float:left;
background: url(images/nav_bar.gif) repeat-x top left;
font-size:1.135em;
}

ul li{
padding-top:0em;
padding-bottom:0em;
padding-left:3.268em;
padding-right:3.308em;
float:left;
position:relative;
text-align:center;
border-right:0.125em solid orange;
line-height:2.73em;
}

ul a{
padding:1.25em 0em;
line height:2.813em;
margin:0em;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#003366;
}

ul a:hover{
color:#ff6600;
}

ul li ul{
display:none;
font-size:1em;
padding:0em;
margin:0em;
z-index:100;
position:absolute;
}

ul li ul li{
border:none;
font-size:0.779em;
background: url(images/nav_bar.gif) no-repeat top left;
width:6.695em;
margin-bottom:-0.625em;
position:relative;
z-index:100;
}

ul li:hover ul{
display:block;
position:absolute;
top:2.70em;
left:0em;
}

h3{
color:#003366;
font-family:Geneva, Arial, Helvetica, sans-serif;

}

h4{
color:#003366;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:0.938em;
font-weight:normal;
}

span{
background: url(images/nav_bar.gif) repeat-x top left;
margin-left:0.375em;
color:#003366;
font-family:Geneva, Arial, Helvetica, sans-serif;
padding:0.938em 20.725em 5.625em 21.25em;
border-top:0.75em solid #66cccc;
}

/*===================
specific selectors
=====================*/

#mainWrapper{
width:62.5em;
margin-left: auto;
margin-right:auto;
margin-bottom:12.5em;
zoom:1;
}

#bgWrapper{
background: url(images/skyline.gif) repeat-x bottom center;
position:fixed;
bottom:0em;
padding-top:-12.5em;
height: 7.3em;
width:100%;
z-index:2;
}

#allContent{
margin-top:4.688em;
margin-right:0.0em;
margin-left:0.0em;
padding-right:-0.9em;
padding-left:0.5em;
}

#nav{
margin-top:2em;
margin-left:-0.2em;
}

#contact{
border:none;
}

#info{
background:white;
border-top:0.75em solid #003366;
border-bottom:0.125em solid yellow;
margin-top:-1.25em;
margin-left:0.375em;
margin-right:1.188em;
padding-bottom:1.25em;
}

#flash{
margin-top:0.625em;
margin-right:8.5em;
margin-bottom:3.125em;
margin-left:11.9em;
z-index:0;
top:0em;
left:0.625em;
param-name:wmode;
value:transparent;
}

#bottomContent{
border-top:0.375em solid #003366;
background:white;
margin-top:-2.625em;
margin-right:0.875em;
margin-left:0.875em;
}

#about{
float:left;
width:28.125em;
border-right:0.188em solid #003366;
/*padding-top:1.5em;*/
padding-right:0.563em;
padding-bottom:1.6em;
margin-top:0.688em; /*0.688*/
margin-left:0.313em;
}

#from{
float:right;
width:28.125em;
margin-top:2.05em;
}

.aboutPara{
color:#003366;
text-align:justify;
font-size:1.063em;
margin-top:0.013em;
}

.fromPara{
color:#003366;
font-weight:bold;
text-align:justify;
padding-bottom:0.625em;
}

.one{
background: url(images/star_icon.gif) no-repeat bottom left;
padding-top:0.65em;
padding-bottom:0.438em;
padding-left:3.188em;
}

.two{
background: url(images/check_icon.gif) no-repeat bottom left;
padding-top:0.65em;
padding-bottom:0.438em;
padding-left:3.188em;
}

.three{
background: url(images/arrow_icon.gif) no-repeat bottom left;
padding-top:0.65em;
padding-bottom:0.438em;
padding-left:3.188em;
}

.four{
background: url(images/globe_icon.gif) no-repeat bottom left;
padding-top:0.65em;/*0.25*/
padding-bottom:0.438em;
padding-left:3.188em;/*2.188*/
}

#footer{
margin-right:-0.95em;
margin-left:-0.1em;
padding-right:0.5em;
}

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 6 years 29 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Validate

Please validate your website first, correct all the errors and then come back here. You have 25 errors and missing tags.

suzaneramin
suzaneramin's picture
Offline
newbie
Last seen: 9 years 12 weeks ago
Timezone: GMT+5.5
Joined: 2010-12-02
Posts: 1
Points: 1

Have your response here once

Have your response here once you make the changes in your backend of [ Link removed please do not spam the forum if you have help to offer please do so in the post where it may benefit all -H ]. those needs to be fixed first.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 12 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

can you plz explain the

can you plz explain the problems you're seeing? What exactly is messing up?

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Cupids: All the measurements

Cupids:
All the measurements in my css are in ems, which means that it's an elastic layout. That should make sure that the layout shouldn't get distorted when a user zooms in or out on his browser. However, the layout gets completely messed up! (when browser is zoomed in or out) Is there anything else I can do to make sure this does not occur? Thanks for your help!

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

suzan: I'm a beginner; this

suzan: I'm a beginner; this is my first website. Can you explain what back-end of the design is? Thank you.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

suavedesign wrote: All the

suavedesign wrote:

All the measurements in my css are in ems, which means that it's an elastic layout.

Well, no it doesn't. It just ain't that simple.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Ed- Goodness! So what can I

Ed-
Goodness! So what can I do?! I'm a newbie in css- this is my first website. I didn't know things can become so complicated just when I finally finished building the site! Every site that talks about elastic design says to put all measurements in ems. What else can I be missing?
Thanks for trying to help--

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 6 years 29 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

I'll repeat what I said

You seemed to have missed my post. Validate your code, you have 25 errors and missing tags. Here is the link to the validator
http://validator.w3.org/
Once you have done that, or if you don't understand, come back here and post again.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

First you have to learn to

First you have to learn to make your html valid. Without you will go nowhere.

It's like trying to write a novel without learning how to spell!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 6 years 29 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

@Ed - I already pointed that

@Ed - I already pointed that out - twice

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

regia wrote: @Ed - I already

regia wrote:

@Ed - I already pointed that out - twice

Yes, I know. I was hoping an added voice might get the point across.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Okay, I'll do that asap!

Okay, I'll do that asap! Thanks! But when I checked it the first time around, it seemed to be correcting things that to me did not seem incorrect. Is that possible?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

suavedesign wrote: Okay, I'll

suavedesign wrote:

Okay, I'll do that asap! Thanks! But when I checked it the first time around, it seemed to be correcting things that to me did not seem incorrect. Is that possible?

The W3C validators are the authoritative voice on the web as to validity or not. If you do not understand why some piece of code is invalid it is fine to ask here. It will help you to understand how html works, and how html works is critical knowlege.

I won't say that there is no possibility of the W3C validators being wrong, they are just computer programs after all. But they have been heavily debugged and the chance of them being wrong versus you being wrong is heavily weighted toward it being you that is mistaken.

Validation of your code is an essential skill if you want to be successful at designing web pages. Fortunately it is quick and easy - you can even get a Firefox extension that will do it for you so far as the html part is concerned.

Validating your html is like making sure your house has a sound foundation. It won't, by itself, make a bad web design into a good one. But without it your site will, like a house with no proper foundation, eventually fall over.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Okay, I went back to validate

Okay, I went back to validate the markup. The only errors I have left are the ones that are due to my embedded flash movie. I plan on going back and fixing those errors, too, but I imagine it will take me some time. In the meantime, being that the rest of my code is valid, are there any suggestions that you can offer to help me figure out why my layout gets distorted even though my layout is elastic? My nav bar that appears at the top of the site gets totally messed up when a user zooms in and out of the browser. And when using firefox, if the option "zoom text size only" is checked off on the tool bar, the entire site gets distorted, not just the nav bar. Any help would be greatly appreciated, as I'm sitting over this for weeks already!! Thank you.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I have corrected your

I have corrected your original link to the site but it returns not found please check it's correct. It will be essential for people to be able to see what is wrong as the explanations thus far are not technical enough.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

The link to the site is

The link to the site is newstylesignsusa.com

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 6 years 29 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Your website content is not

Your website content is not elastic even though you are using ems throughout. The main content does not expand with browser width it stays the same size. However you have a lot of discrepancies with the widths because of the padding and margins you have added to certain elements.
You can fix the problem by doing the following:
Remove padding-left from allContent,
Remove margin-left from Nav,
Remove margin-left and right from Info

From the ul tag remove the following,
- float: left
- margin-right
and add height: 55px;
On the li tags
Remove the background image, it is already on the ul

Next you are going to have the orange line after the Contact tab, to remove it add a class of contact to the li and in the css add

li.contact {
border-right: none;
}

This works in FF and IE8, and if you want to thank me, please press the Best Reply button which will give me 3 points which I will greatly appreciate Cool

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Regia, you really saved me! I

Regia, you really saved me! I was working on this for ages and your advice helped! Thank you.
Just one (big)problem left: The entire website layout goes haywire when: On IE- You change text size. And on firefoxyou check off the option zoom text size only.
Any suggestions?? Thanks a lot for your help, everyone, it's greatly appreciated!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Don't ask for best replies

Don't ask for best replies otherwise I'll be tempted to remove them Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Regia deserved that best

Regia deserved that best reply!

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 6 years 29 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Thank you

I would change the size of the font on the ul tag, make it 1 em. You are bound to have some line dropping, just look at the menu on this site and zoom text size.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: Regia deserved that

Quote:

Regia deserved that best reply!

I've no doubt he did.

You would have had a reply from myself but my time was squandered requesting working links Wink incidentally the second attempt at a link still doesn't work, please check how to post links correctly.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 6 years 29 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Hugo wrote: I've no doubt he

Hugo wrote:

I've no doubt he did.

That would be "she" not "he", and I'll be a good girl and won't do it again Innocent

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Regia, being that you were so

Regia, being that you were so helpful until now, I'll ask you another question, and then hopefully this entire problem will be solved, and we'll be able to wrap up and close this thread so that others will benefit, too.
Here's my question: The site looks fine now, even when zoomed- thanks to all you helpful people. Except: On firefox, there's an option under "View- zoom" that says "zoom text size only" when that option is checked off, and you zoom in or out, the layout gets totally messed up.
Any idea why and what I can do? Thanks again

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

regia wrote: Hugo

regia wrote:
Hugo wrote:

I've no doubt he did.

That would be "she" not "he", and I'll be a good girl and won't do it again Innocent

Big smile I just knew as I wrote 'He' it was going to be wrong, usually I write 'they' to be safe. My apologies.

Oh and my remark was somewhat tongue in cheek Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

text increase came before

text increase came before zooming as it were and was really the only thing that was available it worked on increasing/decreasing text size. The mark of a working true elastic layout is when text resizing keeps the layout together up to a reasonable level of increments - generally 2 or three with perhaps a max of four.

So to have an 'elastic' layout all your sizing of elements needs to be using em measures so that the font size becomes the point of reference for the elements width or height i.e it adjusts proportionally to the given text size.

Zooming - although arguably the better approach - is an artificial construct that takes all elements and proportionally adjusts them. Nearly all browsers now are able to do this so text re-sizing is probably becoming a redundant means to re-size a page.

Somewhere in your rules you are probably not taking into account the need for a dimension or margin being set using relative measures i.e '%' or 'EM's'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me