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 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Position Problem "IE" Vs "Firefox"

    I have THIS PAGE and at the top of this page in the right corner should be an image which is positioned with CSS. In IE, it is fine. But when I check with Firefox, its positioned on the left side instead of the right.

    Here is the CSS I used...
    Code:
    .ad {position:absolute; top:5px; left:780px }
    and the codeing on my page is...
    Code:
    <div class="ad"><a href="advertise.html" target="_blank" ><img src="images/advertisewithus.gif" alt="Click Here to advertise with us" width="200" height="100" border="0"/></a></div>
    How can I make it do what I want in Firefox?
    Last edited by blackwolf; 11-19-2008 at 01:15 PM.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Write valid markup. You have 149 html errors. I couldn't check how many CSS errors you have.

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    In fact, you position '.ad' on the left side yet IE is putting it on the right but you are trying to correct Firefox?

    Never, ever use IE as a reference for what is working. Follow Firefox and it will show what you wrote. With IE, you never know.

  • #4
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts
    149!! Where are the errors?
    I have positioned it 780px from the left so it appears where i want it, on the right. How can I get it to appear on the right in both browsers?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by blackwolf View Post
    149!! Where are the errors?
    I have positioned it 780px from the left so it appears where i want it, on the right. How can I get it to appear on the right in both browsers?
    See http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Those errors dont bother me, almost every web page I tried had errors, even this website has errors. So, how do I get the image to be positioned on the right instead of the left?

  • #7
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    So, how do I get the image to be positioned on the right instead of the left?
    .ad { float:right; margin-top:5px; margin-right:5px } in your CSS.

    Floating right throws stuff directly to the right. Floating stuff left, throws it left. The margins will nudge it back, left a little, into position for you. That's the basic principle, anyway. In all browsers...

    Validation is also very important, but without a proper grounding, I would say most of what you produce in this mannner, will be teeming full of errors anyway. Validation will help you write proper syntax, but it can't tell you to dump frames, use divs, or suggest methods of design. Only a human being can tell you these things.

    The code I've offered up won't help you deal with the other errors - but I think, get a feel for the principle of floating things left and right, rather than all that absolute positioning. Combined with margins and padding, you'll soon be looking at a more intuitive system for reliable positioning.

    Then when you've done something you're happy with, keep running it by the validator, to check your progress. That will indeed assist you in writing the code correctly.

    I'm sure others will be able to assist you with some reference material, regarding floating and positioning elements.

    I doubt this will help greatly, but I hope it puts you in the right direction.

    Edit:
    Looks like you've used float before. Surprised you hadn't tried it already.

    Regards,
    Last edited by Doctor_Varney; 11-18-2008 at 11:03 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • Users who have thanked Doctor_Varney for this post:

    blackwolf (11-19-2008)

  • #9
    New Coder
    Join Date
    Oct 2008
    Posts
    61
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thans Doctor Varney. I had put the page through the validator and and ammended the code as I should have done. Your floating method seems to work great. Thanks.


  •  

    Posting Permissions

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