[Resolved] <DIV> Help

[Ray]

<DIV> Help

Hello..

Im sorta new to the whole <div> tag concept.. im old school and loved the use of tables..

Anywayz.. My problem comes to my new layout that I have started to code. It looks great in IE but when it comes to Firefox it looks all mashed and completely wacked out.

I was wondering if anyone could help me.. the site is www.whizmix.com

help appr

 

[nasaboy007]

You seem to use absolute positioning for all your divs except for Table_01, why is that? If you do everything with absolute, try using absolute for Table_01 too to position it.

 

[Ray]

it doesnt seem to work.. it just moves the the center to the top right

 

[nasaboy007]

Works for me when I change it with firebug.

Here's what I have in CSS:

#Table_01 {
height:212px;
left:159px;
position:absolute;
top:140px;
width:auto;
}

I'm not sure how you want it to look exactly, so just play around with the top and left values to move it. Firebug is the BEST (can't emphasize that enough) for debugging in firefox.

 

[Ray]

ok now its in the right position however the top nav bar is still missing.. its the bar with the txt on it.. the bg image wont load in firefox but loads in ie.. the height is suppose to be 34px

 

[nasaboy007]

#top_nav edits:
add "clear: both"
add "background-repeat: no-repeat"
add "padding-top: 10px"
change to "height: 24px"


#Table_01 edits:
change to "top: 159px"
change to "position: absolute"
add "left: 157px"



look good?

 

[Ray]

looks perfect -- thanks.. rep added

the footers not there.. i shoudl be able to figure this one out tho

 

[nasaboy007]

glad to help. css can get ugly, you just gotta keep practicing.

i used to be a strictly tables guy, but i switched over to css.

(still love tables tho XD)

 

[Ray]

i agree tables are soo much easier

figured out the footer.. had to change it to clear both and relative

 

[Unknown]

General question: Whats the purpose of the # before declaring the name of the css style?

 

[nasaboy007]

the # declares that its the style for the element in the html with the id of whatever proceeds the #.

example:

#maintext {
color: red;
}

<div id="maintext">this is red text</div>


so, anything you put into the CSS declaration up top will be applied to whatever html tag has id="namehere". similarly, if you use a period (.) isntead of a # in the CSS declaration, you'll define a class (so that you'd do <div class="maintext"> instead of id="maintext") the main difference between id and class is that id's can only be used ONCE in an html page whereas classes can be reused as many times as you'd like. id's are generally used when they'll be dynamically interacted with by things such as javascript, because javascript's getElementById can only reference the unique ID of an html tag when changing it's attributes.




wow, i don't think i've ever written a more technical description in my life lol.

 

[Unknown]

Thanks! Always wondered what the reason was.

Repped