Css Positioning Help

I really didn't want to do that. But I have to ask for help.

Here is my main website. In all of its table ugly glory. http://www.ucmb.uconn.edu

I'm eventually going to want to make a new layout. But I want to convert the old layout to table-less CSS first. I want it to be as cross-browser as possible with relatively recent browsers (IE 6...maybe 5 and 5.5, NS6+, MacIE5, Opera 6+ and firefox)

heres my test site so far: http://www.aodnetwork.com/mark/test/test.htm EDIT: Please read through this and see my next post(s)...this has been changed to reflect my updates! (Update 7/08)

its not so much so far I know, but I'm trying to align the tables correctly before adding any content.

if anyone has any suggestions for me, that would be great. here are my current problems:

1.) if you highlight the main image, you can see there is still some space around and below it (seems to be only a few pixels), I have border, margin and paddnig set to 0 for the image elements, whats the deal?

Rest of the questions are in my last post as I've fixed the ones I had before

questions I have:

1.) I"m not sure whether to use em's, pixels or percentages to define text size, margins and padding. I'd just assume use pixels for margins and padding but text size I dont know about. I'm so used to using pixels the though of using something else didn't really occur to me. Any suggestions?

2.) I'm not sure whether its worth making the site expand its width for higher resolutions anymore. I run 16*12 but most people run 1024*768, which can make things difficult, especially with positioning. thoughts? Edit in my latest work, I changed the site to static-width. Not sure if this was the right idea...suggestions are welcome.

this is a major re-code from me, and I started with a blank sheet last night and have tried to work my way into something that looks remotely like what I have so far. if anyone has any css or xhtml input for me, that would be great. I think I'm doing ok so far but I'm not sure if I'm repeating something that I shouldn't be (this especially applies for css)

any help would really be appreciated

#186936

here is my updated work: http://www.aodnetwork.com/mark/test/test.htm Edit Link Updated 7/08

I got some of what I wanted to get done today, so that is good. for some reason I changed my ID's to classes and all worked as I wanted it too. talk about scratching your head in confusion. perhaps I called the ID's wrong, I'm not sure, but as long as it works, I am happy. This is what I wanted to get done. I also had the image and break inside the left column wrapper (that was dumb)

edit: firefox float problem fixed...though I am still looking for a solution that doesn't involve me putting a stupid break after my divs to mess up my code :6 (thank you to DeFr for suggesting this)

#186971

well, alright - I could help, if you send me the css.

(flo.pichler@web.de)

#187064

Originally posted by pichfl@Jul 7 2004, 08:47 AM
well, alright - I could help, if you send me the css.
<{POST_SNAPBACK}>

A quick look in the source code gives you this: http://www.aodnetwork.com/mark/test2/css.css

#187071

^ what he said (thanks)

anyone else have any suggestions?

#187099

To get the float to look right in Firefox, you'll have to put something ( probably a

) at the end of outer table with a clear:both; style to get your background to extend below your floating elements. So, something like
just before your last

#187155

thanks DeFr...ironically enough I was just about to do that before you suggested it...I read about that on a site today. thanks again!

(too bad there isn't another way to do it that won't have me stick a break in the middle of my ending code, but I'm not complaining, lol)

edit: updated with break clear fixes

k...new problem. opera. seems like when I set my right div floated to 100% opera doesn't like it and it seems to go past the outer containing div (the big div that holds everything else)...if I reduce the size from 100% its just fine. what gives?

#187201

k...so I caved and decided to do a fixed layout because a variable layout wasn't working

here is my progress: http://www.aodnetwork.com/mark/test/test.htm

looks great in IE 6. everyone go nuts.

problems:

- opera has the right margin of the right float NOT at 3 px...not sure if this is normal opera rendering issues or not.

- firefox for some god unknown reason is cutting off the bottom border of the 2nd table down on the left and third table down on the right. why, I have absolutely NO idea! I've never seen that in the 3 days this has been worked on.

- there is still a small border below the main image. (if you'll highlight it, you'll see) not sure why its there but I want to get rid of it.

thoughts? comments and suggestions on either what I have (source/css) or how I could make it better?

#187345

still having the same problems as above. I just added dummy text into the rest of the columns to see if the length of text could be it. It wasn't. I also tried to change the length of the headers to see if that was the problem, and that didn't create the problem in the other tables either. :/ The strange thing is that if I increase the borders to 2 pixels, the tables in question show a 1 pixel border, so one pixel is getting cut off somewhere and its not at the bottom of the containing divs...in addition, if I remove the 8 pixel high table footer, the tables look normal. wierd.

#187573

My old idea was stupid, I figured out what you need to do.

Remove div.table_footer completely.

Add the following to your css.

div.table_innards {
        background-color: #E5E5E5;
        margin: 0;
        padding: 0;
        overflow: visible;
        border-bottom: 8px solid #D7D7D7;
}

Then, for example, instead of

        <div class="left_column">
          <h1>Site Navigation</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <div class="table_footer"><!-- table footer --></div>
        </div>

use this:

        <div class="left_column">
          <div class="table_innards">
            <h1>Site Navigation</h1>
            <p>Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
          </div>
        </div>

#187574

thank you cerebral for your reply. I will try that. this is interesting though:

interestingly enough, when I reduced the width of the table footer in the content area, lo and behold the border is sitting right behind it! (I do not currently have a size set b/c IE goes nuts) the table footer renders right above the table in the first table (as it should) but its right on top of the 1px border in the 2nd table. how does that make sense, especially b/c its not every 2 tables (the left column has 5 of them) is what is driving me nuts

#187584

Originally posted by MDZ61384@Jul 8 2004, 04:42 PM
thank you cerebral for your reply. I will try that. this is interesting though:

<{POST_SNAPBACK}>

Edited my post. Works ALOT better now.

-=edit follows=-

Also: since your wrappers are set to float left and right, you don't need your div.left_column and div.table to be floating left and right. You also don't need as many

tags as you have, just set the margin-bottom css property to space them out.

#187586

well...I've updated the site again. still a few minor glitches (there are still a few border errors for the right float in firefox/opera no matter if I float that table to the right or left and theres still a border around the image on the bottom...if you highlight it, you will see) other then that, things are looking good so far.

I have cleaned up the CSS more and xhtml...if you'd like, you can check the link in the first post to see how its going. Or just click this link (click)

cheers everyone!

#187954

Originally posted by MDZ61384@Jul 9 2004, 03:39 PM
well...I've updated the site again. still a few minor glitches (there are still a few border errors for the right float in firefox/opera no matter if I float that table to the right or left and theres still a border around the image on the bottom...if you highlight it, you will see) other then that, things are looking good so far.

I have cleaned up the CSS more and xhtml...if you'd like, you can check the link in the first post to see how its going. Or just click this link (click)

cheers everyone!

<{POST_SNAPBACK}>

Now, see, you learn something new every day.. I had no idea you could assign multiple classes to a single element.

#187968

Originally posted by Cerebral@Jul 9 2004, 04:08 PM
Now, see, you learn something new every day.. I had no idea you could assign multiple classes to a single element.

<{POST_SNAPBACK}>

absolutely...and boy is it ever helpful! :woot: I figured it out this morning, and especially for those little changes, it prevents you from writing out a whole new mess of code, saving you a LOT of room in your css file. :naughty:

I'm still trying to fix the particulars as I now confused myself yet again...but so far so good

#187977