View Full Version : Cross-Browser Coding- Help this Noob!

01-04-2010, 08:26 PM
I am developing this site:
(FYI- images and copy not final from client)

I have successfully coded it for Firefox 3.5 on my Mac. Of course, I am having trouble with IE. One issue is that IE is removing the margin on the rotating quote at the upper right-hand corner, which is strangely the opposite of everything that I've read (IE typically increases the margin). It may be that I just need to assign a different style sheet to the page for IE with larger margins, but since it also seems to be shifting some other elements completely out of place (particularly in IE6), I am wondering if it is a fundamental problem with the page structure.

Also, I was wondering if it is still a bad idea to use pngs. I am using a screenshot service to see the site in the various browsers, which is limiting. Some images are not showing up, but I'm not sure if it's the image type or if it's just that they hadn't loaded before the screenshot was taken (some screenshots show an incomplete progress bar while others don't show a progress bar at all—since it is showing various browsers in various operating systems, it may just be the difference between them).

Help!! :-)

01-05-2010, 04:54 AM
Hello smeyer,
that is odd. It looks like IE7 is ignoring the margin-left:35px; but, if you change it to padding it works. Of course padding isn't working in FF the way you'd expect. Very odd.
Can you put padding on the containing div instead? That seems to work in both FF and IE... I think.
Like this -

#quote {
float: right;
width: 481px;
height: 95px;
margin: 0px;
padding: 0 0 0 35px;
background-image: url(images/quote.jpg);

#quote_text {
font-size: 12px;
color: #666666;
width: 382px;
margin: 0;
/*margin-left: 35px;*/