positioning of dhtml with css not working (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

cfilut -> positioning of dhtml with css not working (5/8/2007 16:05:33)

can anyone tell me whats going wrong here? My navigation bar is perfectly centered in IE but firefox is off to the right a little. I had it working perfectly at one time. Not sure what happened, now I cant get it centered.

http://commercialrecording.com/new/



Tailslide -> RE: positioning of dhtml with css not working (5/8/2007 17:14:13)

Not really 100% sure to be honest but you've got this div in there: 

<div id="dmbri" style="position:absolute;">
<img src="images/dmb_i.gif" name="dmbif" width="1" height="1" border="0" alt="">
<img src="includes/dmb_m.gif" name="dmbjs" width="1" height="1" border="0" alt="">
</div>


Which appears to be doing nothing and it might be worth removing it to see if that solves your problem. Also best to use a complete DOCTYPE as you've only got a partial there and may not be getting the full effect of standards mode in any of the browsers.



cfilut -> RE: positioning of dhtml with css not working (5/9/2007 10:17:20)

thanks, i took that code out, didnt do anything, I declared the full doc type and it didnt do anything. This one has me baffled.



Tailslide -> RE: positioning of dhtml with css not working (5/9/2007 10:54:48)

Could you upload the new version as the version online is still the old one.



cfilut -> RE: positioning of dhtml with css not working (5/9/2007 11:30:56)

I was wrong, taking that code out makes the nav dissapear, I did declare the full doctype, only on the index page. It is uploaded.

Thanks for looking at it tailslide.



cfilut -> RE: positioning of dhtml with css not working (5/9/2007 11:48:43)

I got it tailslide. It was my footer, I deleted both includes and deleting the footer corrected it.

http://commercialrecording.com/new/index2.htm

Thanks for the help, I thought I tried this move already beofre I posted.



Tailslide -> RE: positioning of dhtml with css not working (5/9/2007 11:50:30)

Ok I think I've figured out what's going on. Bear with me here.

Currently the page in Firefox has no scrollbar on the right hand side - it does by default in IE. You've also got (or had you've changed it) your menu positioned absolutely on the page (centered) - ok, with me so far? Now when you position stuff absolutely you are positioning it relative to the whole viewport UNLESS you put it in another div which you then make position:relative. Then you'd be positioning relative to that div. Does that make any sense so far?

Ok so In IE, with a scrollbar you've got it all centered perfectly because you've got a bit of extra screen real estate there - in Firefox you don't have that extra space - no scrollbar by default until the page becomes long enough to need it. So in Firefox it's off to the side a few pixels.

Soooo a couple of choices. Stick the site inside a containing div which you can centre on the page and position the menu absolutely within that (get rif of position:center - it's wrong).

Or - probably easier would be to add a bit of code to force a vertical scrollbar to appear in FF. I tend to do this as standard in all my sites as the page shift annoys me in FF.

Add this into your stylesheet: 
html { min-height: 100%; margin-bottom: 1px; }


With luck that will sort it. Get rid of positon:center anyway.



jurgen -> RE: positioning of dhtml with css not working (5/9/2007 13:33:38)

The navigation is not showing up in NS8.



cfilut -> RE: positioning of dhtml with css not working (5/14/2007 13:51:53)

nice explanation tailslide, I did understand what you said, even though I am struggling with expression and css.

Something you said sparked something in me that I didnt realize before, centering the div...

I re-worked the index page (only) without the use of tables and used only divs and css to position everything. Besides lacking a lot of fancy design, is this the way your supposed to build pages? No tables, just use divs? Does this page validate now? I ran a report in expression and recieved no errors. It looks like everything lines up correctly now.



Tailslide -> RE: positioning of dhtml with css not working (5/14/2007 14:14:36)

Hi again.

It depends who you're asking. If you ask someone like me then I'll say yes, you only use tables for tabular data. For laying out a page you should use divs and other semantic tags (i.e. Heading tags for headings, list tags for lists etc etc). You should also always have all your style rules in an external stylesheet - that way you can literally switch a page layout around without actually touching the markup on the web page at all.

But like anything CSS takes a while to get to grips with and some people just don't feel that they can spend the time doing that so they stick with tables. Usually the reason given is that browser compatibility isn't there yet and there certainly are some issues but it doesn't take too long to figure out what to avoid and how to get around the most common problems. Otherwise I can tell you I wouldn't have used only CSS layouts for all my clients' sites for the last 3-4 years!

As far as validation goes - if it's the page you linked to in your first post then no, it doesn't validate yet but you're not too far off. This - http://validator.w3.org/ is the validator to use. Don't be too worried if you get loads of warnings - quite often if you solve one issue then many others disappear.



cfilut -> RE: positioning of dhtml with css not working (5/15/2007 16:32:17)

Ok tailslide, As I struggle through getting my first page ever to validate, I think I might have solved a couple problems with firefox and IE.

I attached the dhtml menu bar to the Logo image (bottom left) and that seemed to cure the floating problem.

I also tried validating page, after a few tweeks, looks like I got it.

http://commercialrecording.com/new/test.htm

Now I have to figure out what Jurgan is talking about, I dont really feel like downloading yet another browser. ugh!

The design is a little weak, but I will work on that later. Thanks for getting me through.



jurgen -> RE: positioning of dhtml with css not working (5/15/2007 19:40:36)

Just look at the image. I can not see any menu in NS8. It shows great in IE ....

[:o]

[image]local://upfiles/20595/300164534BE54ECAB3F7437B71811C3A.jpg[/image]



Tailslide -> RE: positioning of dhtml with css not working (5/16/2007 3:05:30)

Me again!

I've figured out the NS8 issue. NS8 (which I'm not familiar with at all) has got loads and loads of different set up options including whether you use the Firefox or IE rendering engines. Obviously I automatically went for the Firefox version (and I'm guessing that Jurgen did too). In the Firefox rendering engine the IE activex thing is automatically disabled. If you choose the IE rendering engine then you can allow activex things (such as your DHTML menu) to appear or not appear.

So the answer is basically that it's a user option whether the menu will appear or not - which is why I tend to avoid this sort of menu and go for the basic CSS menus as being more reliable. In other browsers too such as IE7 if the user has their security settings up high then the menu doesn't appear and you get the basic unordered list instead.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.1103516