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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Specify image size in CSS

    Hey guys,

    Im using a javascript mod which requires me to state the dimensions of all of my images in my html. I have the code for my header image in my css instead, as this code:

    h1 {
    margin:0px; padding:0px; margin-bottom:5px;
    text-indent:-9009px;
    height:132px;
    widows:400px;
    background:url(xxx/logo.png) no-repeat;
    }
    Which is here in my index:

    <a href="index.html"><h1>Blah Blah Blah</h1></a>
    Can somebody please explain how i can state the dimensions of my image in my code without changing the way the end result looks in IE?

    Thanks!

    James

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by spadez View Post
    Im using a javascript mod which requires me to state the dimensions of all of my images in my html.
    Uhm, for this you actually need an image in your HTML.

    Quote Originally Posted by spadez View Post
    I have the code for my header image in my css instead […]
    See? CSS ≠ HTML

    Quote Originally Posted by spadez View Post
    Can somebody please explain how i can state the dimensions of my image in my code […]?
    You can’t change the dimensions of background images. As you said yourself earlier you need to specify the dimensions of images in your HTML. That means you have to put the image as actual image into the HTML, not as background image in the CSS.

    And also the HTML you showed is incorrect and invalid. Anchors can’t contain headline elements, it has to be vice versa:

    Code:
    <h1><a href="index.html">Blah Blah Blah</a></h1>

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ok, i understand what you are saying. However, when i remove the header image code from my css so h1 is this instead:

    h1 {
    margin:0px; padding:0px; margin-bottom:5px;
    text-indent:-9009px;
    height:132px;
    widows:400px;
    }
    And put this in my html:

    <h1><a href="index.html"><img src="images/logo.png" /></a></h1>

    The logo.png doesnt show up. Ive even tried hardcoding the image but it still doesnt show up. Can you explain why this is happening please?

    James

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Is the path correct? If you type http://example.com/images/logo.png (where examplt.com is your domain) does the image show up? What do you mean by “hardcoding the image”?

  • #5
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    <h1><a href="index.html"><img src="http://www.hiven.net/radio/images/logo.png" /></a></h1>
    This is the code im using now, when you go to that web address the image does show up, but when you look on my index.html it doesnt. I can post the contents of my css and html pages if that helps.

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    well, I see your image so it is definately online.
    Are you sure that the path to image in your index file is exactly the same as in the link you posted? if there is the slightest difference, the image will not show.

    bazz

  • #7
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Nope it is exactly the same, i copied and pasted it. I think it might be showing under the tiled background image or something random like that. Is there any way i can narrow down the problem.

    If i remove the image code from the <h1> tags the image shows up, it just breaks something else.

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    'Cause you're using text-indent. Remember images are inline elements.


  •  

    Posting Permissions

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