Thu, 2005-03-24 19:26
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
Thu, 2005-03-24 20:01
#1
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.
Fri, 2005-03-25 03:13
#2
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.
Fri, 2005-03-25 21:08
#3
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
Sat, 2005-03-26 21:39
#4
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.
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.
Sat, 2005-03-26 23:28
#5
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
Sat, 2005-03-26 23:43
#6
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
Sun, 2005-03-27 00:30
#7
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.