CSS Layout Breaks upon Zooming in / out

Steve_

New Member
Hi,
I am a self-thaught web designer with a staggering 3 sites or so under my belt. I just finished the first page of a website for a client, who is a friend and therefore light-years more patient than a "real" client would be.

I love the way the sites looks, it is fairly consistent in the spectrum of popular browsers, and overall I was quite proud of it until I realize a major problem that to be honest is about two steps away from making me drop my dream of becoming a web designer.

When using Chrome, Safari, or older versions of Explorer the website's layout falls apart if someone has their zoom set to anything other than 100%.

It is frustrating me to the point of near depression. I used a div to surround the whole body, and the pages layout, which in this case is a MENU is done almost entirely with ULs (unordered lists) positioned absolutely.

The site is made up in such a way that all the parts connect (almost like a puzzle) and if some parts are out of line, it is dreadfully obvious.

I heard the zooming rounds up figures and could call for a couple of low alpha pixels here and there, but in my case some block elements are literally 25-50 pixels out of place.

PLEASE HELP! ---> www.stevemarcella.com
 

Edge

Member
Moving forwards, it would be better to use data tables for a recipe. That way cells can be semantically associated with each other. Currently as everything is in these one item separate lists (which have position absolute) so there's no way of associating ingredients with quantities. If I disable CSS then the page makes no sense - it should still make sense, but just look basic. try to avoid using absolute positioning as it takes content 'out of the flow' which can cause you all sorts of difficulties - maybe not insurmountable but not the easiest way to go about it.

So moving forward, get some nice lean semantic HTML as your foundation and then add the CSS on, try to avoid floats and absolute positioning, get to know display: inline-block, and use ems as Chrishirst has said.
 

Steve_

New Member
Great help guys and will honestly follow your advice. I used HTML as a gargabe skeletal foundation, and then created my whole site with CSS, I'll try my best moviing foward to create my site with markup, and then use the styles to enhance the look.

Thanks!
 

HireLogo

New Member
I would never recommend using tables. I also can't replicate the error you are referring to. I do like your site though for some reason. I'd never design one like it, but it has a certain homey feel to it.
 
Last edited:

Phreaddee

Super Moderator
Staff member
I'm not a big fan of the layout and I too couldn't replicate the issue with the layout "breaking" on text zoom, but there is a few issues which need addressing.

I am surprised no one has caught on to this nice blunder.
Code:
<li id="padding", class="oneDarkRow">
first of all an id should only be used once in a document and you've placed id="padding" on every single list item.
second of all a comma has no place in html, at all. there I said it.
thirdly the naming of an id which is the same as a selector is just ludicrous.
why don't you try "font-weight" or "margin" or maybe even "box-shadow"
they're good ID names...

nor this one...
Code:
</head> <div class="wrapAroundBody" id="IdWrappingWholeBody"> <body>
html that is to be displayed in the browser should only ever exist within the confines of the body tag. what on earth do you think you will achieve by wrapping the body tag up in a div? you've got it all wrong it should be, the CONTENT of the site is wrapped up in a DIV contained within the BODY of the HTML. not content > body > div > html. it just doesnt work like that...

and this...
Code:
position:absolute;
is not the way to become a web developer. creating garbage out of html is like spitting in my face, so don't get shitty at my feedback.

you have to consider firstly the concept of separating markup from style in such a way that you can read the html document as if it were a normal word document. people who need the services of a screen reader would need it to work that way and when you write html like that you don't need to resort to gluing everything in place with position absolute, and then wonder why it breaks when things are zoomed. its position ABSOLUTE!

where am I positioned? absolutely. you zoom me in baby, i'm still going to stubbornly sit 20px left 30px top because that's where you put me. ABSOLUTELY so I wouldn't move, and then you complain because I wont move? please!

p.s.
It is frustrating me to the point of near depression.
I don't know you, so please dont take my criticism personally. my method is a swift kick up the arse. trust me it works.
 
Last edited:

Steve_

New Member
@chrishirst
What I meant by garbage is that I kindof used it as a quick starting base and then created my site using CSS.

@HireLogo
Thanks for the positive feedback!

@sdesign1
I have heard from other forums that in this case I should have used tables.

@Phreaddee
I must have overlooked the ID name being repeated since I copy pasted So Much while coding. However, I do agree using an ID name that's also code syntax was a bad idea.

As far as wrapping the body tag, that's my mistake. As I said I'm inexperienced and self-thaught myself CSS, Actionscript, HTML (although I still need to learn a lot obviously) and a tiny bit of Javascript. I'm not trying to spit in anybody's face.

And in terms of creating a good solid HTML base that works in itself and Then using CSS to beautify; point taken.

The zooming-out issue happens in specific browsers, Opera, Chrome, and outdated Explorer whether I position Absolute, relative, or default static. Nevertheless, I will try to refrain from using position absolute all the time or perhaps at all?

Thanks for your post scryptom, without it I might of had a more colorful reply, However you're right, your post caught my attention throughout and I do feel like giving HTML the respect it deserves, starting by studying beyond the basics, which I've done for everything Except Markup, ironically enough.

Thanks all for the replies, feedback HELPS me, whether it's stern or not.
And for someone who might be curious as to how I'll fix the issue, I've gotten a reply from another forum that I think will go a long way to eliminating my problem. Putting the prices and food items into ONE li row and using divs around the words to stick them appropriately to the left or right using text-align.

Thanks again All.

P.s One last thing,
What method do most professional / successful web designers use to position stuff?
I'm sure it might be a slight mixture of including relative etc, but the vast majority of the time is just plain static used?
 
Last edited:

chrishirst

Well-Known Member
Staff member
@chrishirst
What I meant by garbage is that I kindof used it as a quick starting base and then created my site using CSS.
Yes, my comment was merely a tongue-in-cheek remark at the mistypnig, something which i am similarly prone to. :)
 

HireLogo

New Member
Ignore this, he doesn't know what he's talking about.
Absolutely do not ignore this.
Tables are used for tabular data not positioning a web layout. The lower half seems like the right place for it though, but keep the following in mind. It should in most cases be constructed using css though there are positives to tables.

It is also a negative on SEO and I'd have to assume that if you have a site you want it to be indexed. Tables place a hierarchy at structure that could put more importance on other areas outside of the content itself. This is simply because of how it reads to a search engine.

One more thing worth mentioning is the fact that tables are much harder to maintain and/or redesign while css can speed up this process.
There are many other reasons why opening up or hard coding tables is not how its done, but I'll leave it up to you to work it out if you choose.

I understand that some may argue these points, but lets be clear. They will now look into it and find they need to make a change. They may not mention it nor will they admit it, but the change will occur.

Don't ignore this rather create properly.
 
Top