June 19th, 2013, 09:10 PM
Pulling my hair out over positioning in Firefox
Hi! New guy here, greetings to all! Came here a long time ago, but forgot my login since then...
I'm putting together a resume/work sample website (lookin for a job) and re-visiting a website I did about 6 years ago, and I'm beginning to remember why I used to hate Firefox. It's handling of relative positioning is sinful.
The site has long since been re-designed by the person who succeeded me, but I still have the site files on my drive, and I'm in the process of uploading/debugging them.
Anyway, if you could look at the site and give some advice, it's at:
Looking at it in 1024x768 resolution, it looks fine in both IE and FF. But when you look at it in 1280x(whatever height), in IE it looks fine - there is an image of Texas with a group of counties broken out, and it appears right beside the mission statement near the top of the page, just below the banner image and navigation buttons. Viewing it in FF in 1280 resolution, when the browser is expanded to full-screen, the Texas image is shoved up beside the top banner.
When I created the site, most people were using either 1024x768 or 800x600 monitors, and I was able to control this by using the !important tag in the css to make FF see different parameters than IE. But now no matter what I do, the problem remains
I tried using clear:right and clear:both on the div containing the image and also the div's containing the top banner and nav buttons, to no avail. I also tried removing all the !important tags, thinking that the newer versions of FF might be playing nice nowadays and maybe they were no longer needed - No luck.
Here's the css I'm using for that div:
left:400px !important; left:-60px;
top:-280px !important; top:0px;
margin-bottom:-250px !important; margin-bottom:0px}
and here's the html:
<table align="left" width="60%" border="0" cellpadding="0" cellspacing="0">
<td width="145" height="266" align="center" style="vertical-align:top; text-align:center !important; text-align:right; padding-left:20px;"><img id="sbdcLogo" src="images/new_ntsbdc_logo_125x266.jpg" alt="SBDC Logo" border="0" /></td>
<td width="270" height="231" align="center" style="vertical-align:top;">
<div id="mission" >
<b>The <span title="North Texas Small Business Development Center">NTSBDC</span> Network promotes small
business success by providing
management education. With 18
centers in 49 counties, we assist
small businesses in creating jobs and
economic growth by utilizing the
elements of quality counseling and
training, community involvement
and the leveraging of resources.</b></div>
<img id="breakout" src="images/texas_breakout.gif" alt="" style="clear:right;" />
Can anyone give advice on this, as most folks nowadays will be using resolutions of 1280 or above to view the site - really pullin my hair out on this...
June 19th, 2013, 10:40 PM
If your work is going to be in web development, I would highly suggest that you scrap all of those tables in that layout and redo the whole thing using up-to-date html/css.
If you decide to keep your existing layout, then, to fix the image placement, it looks like you will need to create another <td> table cell to hold that "texas" image..to place it next to your mission statement.
To fix your top banner image so it fits properly in the browser window, just change its width from 1890 to 100% and it should stretch and contract as you change browser window size.
EDIT: (the code you have above doesn't seem to match the code in the link that you give.)
Last edited by DonR; June 19th, 2013 at 10:53 PM.
June 20th, 2013, 10:39 AM
Ya, you're right - When I originally wrote the site I was having a lot of trouble getting things to line up right, so I finally went back to my old ways, using tables to force it into submission. I suppose I need to bite the bullet and abandon my primitive ways. I'm a little better at css than I was back then, so maybe it won't be so hard...
When it comes to adjusting the layout for different resolutions, should I create different css files and swap them out according to screen size, or resize each element/font/etc on the page using scripts? I started doing websites before css came along, so I've had to pick it up as I go - I miss some things that seem obvious to most developers...
June 23rd, 2013, 08:36 AM
Don't worry, you will get there.
Originally Posted by cjreynolds
No, you don't need to create different css spreadsheet files depending on the resolution. You use a rule called @media screen, to give rules depending on the size of the computer resolution that the browser is at.
My best advice and the way that I learnt, was by downloading a plugin for firefox called firebug. Then using the the little cursor over the box, top left next to the bug, you can find the element you want to target. This helps you good at selecting the elements you want to target and you can edit the css directly in the browser.