Image Links not Displaying in Safari

Discussion in 'Web Design and Development' started by meganmcgees, Jun 30, 2008.

  1. macrumors newbie

    Joined:
    Jun 30, 2008
    #1
    Hi All -

    I have one page of a site I am working on not displaying properly in Safari and am hoping someone can help?

    The page is here -

    http://turtlebeachlodge.com/newsite/area.html

    The page validates -

    http://validator.w3.org/check?verbose=1&uri=http://www.turtlebeachlodge.com/newsite/gallery.html

    and does display in FF and IE.

    The CSS is -

    http://turtlebeachlodge.com/css/sitewide.css

    The other pages all display correctly (I think), it is just this one page.

    Any pointers you can throw my way would really help. Unfortunately, I do not have a Mac (boo hiss), but have been IM'ing my son who has one - "Can you see it now?". He's getting a little cranky (darn kids - who PAID for his Mac?) but I am out of ideas anyway! Searched the archives, but am not even sure what I am searching for. Thank you for any help!
     
  2. macrumors newbie

    Joined:
    Jan 31, 2007
    #2
    Your code is jacked!

    You need to study CSS more. Instead of <br> use element padding.
    Design your links with ul and li and change the text with CSS background rules.

    Start here http://www.cssplay.co.uk/menus/

    Ed
     
  3. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    The HTML may validate, but the CSS does not. There are a couple errors and are likely causing some of the problem. Also, although the HTML validates, that doesn't mean you'll get hat you expect. The code could use some cleaning up. You've got a lot of unnecessary br tags in there. CSS will be able to help you clean the code up.
     
  4. Guest

    Joined:
    Jan 30, 2006
    #4
    I'm guessing this is the image you refer to:

    Code:
    <center>
    <img src="http://www.turtlebeachlodge.net/banners/tortbottom.jpg" alt="Jungle Adventures at Turtle Beach Lodge">
    </center>
    I am quite new at this thing of HTML and CSS (in fact, very new:)), but try establishing a determined width and height. Also, to center images it's much easier to give a div to the content and then make it in the CSS file. It makes the code look tidier, and also makes it easier to spot were the error is.

    I'm sorry I can't say anything else concerning your problem, but here is another tip I learned a couple of days ago:

    Code:
    #header {
    	border-style: solid;
    	border-color: #482688;
    	border-width: 0px 0;
    	height: 40px;
    	background: transparent;
    	padding: 0 0 0 5px;
    	}
    You don't need to put border-style, border-color and so on. Just using:

    Code:
    #header {
    border: solid #482688 0px;
    
    BTW, what's the use of a 0px border?

    2BTW, very nice site. I liked it a lot.;)
     
  5. thread starter macrumors newbie

    Joined:
    Jun 30, 2008
    #5
    Thank you

    Thank you so much for all the feedback, I know my CSS does not validate yet. Am actually still working on it for the Reservations pages, so was just going to clean it up when I was done.

    I am confused, though - if my HTML validates and this is the ONLY page of the site not displaying correctly in Safari, even though the other pages have <br> tags, what is it about this particular page? And the menu, which also has the <br>, is displaying - at least according to the screenshot my son sent. It is just the images in the "side-b" div that are not showing up.

    I am taking everything everyone is saying to heart, I just HAVE to get this site up and can't start from scratch. I also did not ask lightly, I try and research issues before posting, but am handicapped because I can't even LOOK at it without help. I also know I suck at CSS, I was actually pretty proud of myself for getting as far as I did and so excited I was validated (I take it where I can get it). I AM trying...

    So I removed the <br> tags here -

    http://turtlebeachlodge.com/newsite/gallery2.html

    it is displaying fine in FF and IE 7 but a little funky in IE 6. Is it displaying in Safari? If so, that at least gives me some hope and I will try my hand at element padding instead of the breaks, which I must admit I have been daunted by. Have to start somewhere, though!

    Thank you again...

    PS - Roco, you are sweet saying you like the site, I have looked at it so long I am beginning to hate it - I really appreciate the props. I know it is not anything great...

    The images are -

    <A HREF="javascript:popUp('http://www.turtlebeachlodge.net/beach.html')"><img

    src="http://www.turtlebeachlodge.net/images/finalbeach.gif" border="0" alt="Beach at Turtle Beach

    Lodge"></a>

    <A HREF="javascript:popUp('http://www.turtlebeachlodge.net/roomsalbum.html')"><img

    src="http://www.turtlebeachlodge.net/images/finalcabinas.gif" border="0" alt="Accommodations at

    Turtle Beach Lodge"></a>

    <A HREF="javascript:popUp('http://www.turtlebeachlodge.net/canalalbum.html')"><img

    src="http://www.turtlebeachlodge.net/images/finalcanals.gif" border="0" alt="Tortuguero, Costa Rica

    Canals"></a>

    <A HREF="javascript:popUp('http://www.turtlebeachlodge.net/groundsalbum.html')"><img

    src="http://www.turtlebeachlodge.net/images/finalgrounds.gif" border="0" alt="Grounds at Turtle Beach

    Lodge"></a>

    <A HREF="javascript:popUp('http://www.turtlebeachlodge.net/wildlifealbum.html')"><img

    src="http://www.turtlebeachlodge.net/images/finalwildlife.gif" border="0" alt="Tortuguero Costa Rica

    Wildlife"></a>

    <A HREF="javascript:popUp('http://www.turtlebeachlodge.net/areaalbum.html')"><img

    src="http://www.turtlebeachlodge.net/images/finalarea.gif" border="0" alt="Area of Tortuguero, Costa

    Rica"></a>
     
  6. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Found the problem. The "Holly hack for Peekaboo Bug" parts are making the picture areas 1% high, which makes it invisible essentially. The two key ones are under '#side-b' and '#side-b img'. If you comment out those two lines everything shows up as you're desiring. So blame Holly ;)
     
  7. thread starter macrumors newbie

    Joined:
    Jun 30, 2008
    #7
    Darn Holly

    Thank you so much - that did it! AND it validates and displays across all browsers (at least FF, IE and Safari). Very good to know and I will work on getting my CSS validated before the site goes live, too. Really appreciate your help!
     

Share This Page