Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross-Browser Coding- Help this Noob!

    I am developing this site:
    http://www.envision-creative.com/cli...test/index.htm
    (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!! :-)

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 -
    Code:
    #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;*/
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •