/    Sign up×
Community /Pin to ProfileBookmark

It’s Validated but not Working!!

Copy linkTweet thisAlerts:
Jan 18.2007

I am new at CSS and the validating of XHTML (and CSS for that matter). I used to do everything in HTML (with tables, yes) and I’ve finally switched. Welcome to the past, I know… anyway…

This is my page…
[url]http://www.boehr-realty.com/test/tiregard.htm[/url]

And my CSS code…
[url]http://www.boehr-realty.com/test/style.css[/url]

And what I want my website to look like…
[url]http://www.boehr-realty.com/test/website.JPG[/url] (Yes, crappy quality, I know.)

I want the two vertical columns and the heading to all be centered (and stay centered if the window were to be resized). Unfortunately, I am new to CSS and don’t know how to make this work in BOTH Internet Explorer and Firefox. (Even though, right now, after I cleared all the errors to make it XHTML valid, it doesn’t work in either.)

Please help! I’ve spent 1:15 on it so far and dont’ want to go any further!

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Jan 18.2007 — Looks like a candidate for faux columns off hand.

http://alistapart.com/articles/fauxcolumns
Copy linkTweet thisAlerts:
@WebJoelJan 18.2007 — I felt like playing around and wrote this. It isn't 'faux columns' exactly but it does validate, but if you add or remove more content, you'd probably have to play around with the "height" (which I have set at the unrealistic amount of 127%).This seems to allow Firefox to show the content contained within the red border box, else said red border-box falls short. Clearly, I have some font-sizing issue that makes the font render 'taller' in one browser over another. At least, -from what I can see with my current default browser settings.

You might be able to do something with this, more likely though you will want to do the 'faux columns' thing so that it will be automatically expandable.

[upl-file uuid=59944bfb-d93f-42ea-8f35-68073633d20c size=34kB]tiregard.zip[/upl-file]
Copy linkTweet thisAlerts:
@Ryan123authorJan 18.2007 — ray326 - Your solution worked great! One problem though; I'll address that in a second...

WebJoel - I haven't looked at those files, but I will soon; thanks for the help!



The only problem with this faux columns is that, in Firefox, the header is offset by one pixel (to the left). It works fine in Internet Explorer (I know, don't trust IE, but I wasn't designing it for IE, it just happened to work in IE). The attached image shows two closeups in Firefox. Any ideas as to why?

[upl-file uuid=c030b58f-6f25-4552-b690-0fcaeb8dd5dc size=37kB]offset.jpg[/upl-file]
Copy linkTweet thisAlerts:
@ray326Jan 19.2007 — Couple of fixes here<i>
</i>#container{
width: 845px;
height: 100%;
margin: 0 auto;
}

#header{
width: 741px;
height: 132px;
margin: 0 auto;
}
Copy linkTweet thisAlerts:
@Ryan123authorJan 19.2007 — That didn't seem to fix my problem. But may I ask why you did what you did? As in, why add the 0 in the margin and why remove the position? Unnecessary?
Copy linkTweet thisAlerts:
@blutterJan 19.2007 — The #container is looks like it's missing a closing bracket }
Copy linkTweet thisAlerts:
@Ryan123authorJan 19.2007 — Still getting a problem with the header being off by 1px. Any ideas anyone?
Copy linkTweet thisAlerts:
@CentauriJan 20.2007 — It seems to be due to differences in rendering centered background and centering elements. Could cheat by jogging the margins:
[CODE]#header{
width: 741px;
height: 132px;
[COLOR="Red"]margin: 0 51px 0 53px;[/COLOR]
}[/CODE]

Cheers

Graeme
Copy linkTweet thisAlerts:
@blutterJan 20.2007 — You could put a conditional statement in your css, like IF the browser is firefox then adjust the margin one pixel. Work arounds suck, I know, but so does spending time on ONE pixel.
Copy linkTweet thisAlerts:
@CentauriJan 20.2007 — You could put a conditional statement in your css, like IF the browser is firefox then adjust the margin one pixel. Work arounds suck, I know, but so does spending time on ONE pixel.[/QUOTE]

The misalignment occurs in BOTH browsers, so conditional statement not required.

Cheers

Graeme
×

Success!

Help @Ryan123 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...