7 replies [Last post]
ApletFX
Offline
Regular
Sacramento
Last seen: 17 years 48 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

I am working on a CSS site that is supposed to be Section 508 compliant and I thought I would try my hand at CSS and I am having some issues.

Explanation
I built the site for IE to start with as the majority of the users are IE. But now I want to include FF and other users too. I am not very familure with CSS and have only created simple sites with it. This site is tough. it has rounded corners and sits in a fixed width container div that centers it's self in the middle of the window.

So far in IE I have used float:left and relative positioning to make it look right but now in FireFox the Navigation snaps to the top of the screen and the text container div is half of the size that it should be.

Here is a link to my testing site: http://coa.thewaxbox.com/setup.cfm

Here is the CSS: http://coa.thewaxbox.com/CSS/setup.css

Here is what I know so far, and perhaps someone can explain to me what is going on and how I might be able to fix it.
I read somewhere (don't recall where) that there are ways of tricking the browsers with comment hacks and other tricks so that parts of the css will be ignored by some browsers and not by others. Is this something that I can do here?

Also, are there any problems using the relative positioning inside a div like this. Do I have to clear items in order to keep it straight? If so when?

Thanks in advance for your help.

Mark

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 37 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Looks good in IE but not FireFox. Can I get a hack?

First of all, the "preferred" way of designing is design for FF and then use "hacks" if necessary for IE...
That being said, your layout should be relatively easy to accomplish for both FF and IE.
I will look at your page later and get back to you... unless one of the others here beats me to it.

ApletFX
Offline
Regular
Sacramento
Last seen: 17 years 48 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

Updated!

Update!

Ok So I have rebuilt this site 4 times and this time I used more absolute positioned elements and I got it to a least work ok in both browsers. I am still fighting a few issues that I don't know how to fix. but it's getting there. The New versions are linked below:

Link to the site
http://coa.thewaxbox.com/setup4.cfm

Link to the css
http://coa.thewaxbox.com/setup4.css

Two items that really bug me here is the gap at the top of the page in FireFox. Not Sure why that is. I have both the padding and the margin set to 0px on the body element.

The next item is the lower side bar. it is in a div called #mainSideBarRight For some reason I had to assign it an extra 50px for the top position just to get it to align.

The last item that is not such a big deal is the footer. It is all out of position. and I am sure why. I have tried moving the footer both in and outside the main container div.

Thanks in advance for the help fellas.

benny
Offline
Enthusiast
Last seen: 14 years 36 weeks ago
Joined: 2004-08-24
Posts: 64
Points: 0

Looks good in IE but not FireFox. Can I get a hack?

Hi,

the first 2 things I don't know, but to position the footer in a correct way you could give it a absolute position, place it in the container-div and position it with its margin.

Hope that helps a littlebit,
greets ben

ApletFX
Offline
Regular
Sacramento
Last seen: 17 years 48 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

Yet another update

So I have been fighting this stupid layout for a week now. and still no resolve. I get it to work in one browser and it breaks in another. I am running out of time on this phase of the project and am getting desperate for answers. I sure hope someone can help me fix my broken code.

Sorry to post like this. I know you are all busy with your own projects. If someone out there is willing to make this code work in IE and firefox I would like to extend an offer of payment. I can pay you through paypal. I cannot afford much. I hope an offer of $40.00 US would be enough for compensation.

The above links no longer work but here are links to the new files.

html
http://coa.thewaxbox.com

StyleSheet
http://coa.thewaxbox.com/css/homestyle.css

Here is a jpg of the homepage design
http://coa.thewaxbox.com/images/homepage.jpg

Issues yet to fix
So far I have rewrote this page 7 times and still I cannot make it do what it is supposed to do. So far I have it working ok in IE on the PC. This is may target user, but I want it to work correctly in FireFox too. The two biggest issues at the moment are the footer and the Right side events section.

The Footer is supposed to sit centered of the screen positioned at the bottom. It should stay at the bottom of the screen except in the case of long pages, where it should be at the bottom of the content. Here is a link to an example that I found that does what I want it to do. I just could not make it work. http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

The other problem area as mentioned above is the events side bar. I have it floating to the right in IE but in firefox it sits at the edge of the main text container and slightly high. I need it to sit flush with the right side and 10px below the main navigation.

Thank you for your time.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 7 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Looks good in IE but not FireFox. Can I get a hack?

I can't understand re-inventing the wheel. This is a basic 5-box design: header three column body and a footer. The only wrinkle is the box to the right of the header. Google up: css three column "fixed width" and there are a bunch of designs. A page listing pages with layout collections can be found at Protagonist. Absolutely stay away from absolute positioning to solve problems. The most robust three column designs are done with floats - you just have to get a hang on thinking differently and realize that you can have a whole column in the margin of another.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

red58
Offline
Regular
Canada
Last seen: 15 years 15 weeks ago
Canada
Joined: 2005-03-21
Posts: 38
Points: 0

Looks good in IE but not FireFox. Can I get a hack?

sorry I can't take yer $$, but I can show you screen shots in Firefox 1.01 and Opera 7.5 and in IE 6

I notice IE6 shows no login box, and the footer is just peeking out near 'March 17', not at the bottom of screen or page - the problem seems to be in the code for the nav dropdown, which IE shows expanded over the whole page - in O7 the 'overlayed' portion of the right div is transparent, while in FF1 that same overlay is opaque

as said here - write for FF and then find the way to make it work in IE, which it currently doesn't for me!

Bill

ApletFX
Offline
Regular
Sacramento
Last seen: 17 years 48 weeks ago
Sacramento
Joined: 2004-07-27
Posts: 14
Points: 0

Looks good in IE but not FireFox. Can I get a hack?

updated

Thanks for the links and screen shots fellas! I do appriciate it. I am anxiously awaiting the time when I can say "I have learned the ropes" with CSS. I do have a subscription to browsercam.com and can see that in some browsers it will fail. Not sure why the navigation fell apart as bad as it did in IE 6. I use IE 6 and it tests out ok. do you have JS turned off? I think that could be why.

I was able to fix the Events Menu on the right. Turned out I had a claear:both attribute on the main navigation that I did not know caused an issue. I am not sure why at this point. I just messed around until it worked. (I got lucky)

As recomended above. I will stick to designing in FF and then fix for IE. That sounds like good advice.

Well I am off to fix the footer and hopefully start codding the secondary pages. Thanks for checking in on this plea for help.