www.webdeveloper.com
Results 1 to 5 of 5

Thread: Images out of line in Firefox

  1. #1
    Join Date
    Sep 2011
    Posts
    9

    Images out of line in Firefox

    Hi,

    I'm working on a website in which I am using opacity in CSS for the content so that the background will show through. As a result any images that I place in the content inherit the opacity. As a workaround I have positioned images over the original images by creating divs outwith the content div. This works very well except that in Firefox the images are out by about 50px. Also the bottom margin does not appear in Firefox. Any help would be very much appreciated.

    Website is http://www.lynseyhalliday.co.uk/ecle...r/gallery.html
    http://www.lynseyhalliday.co.uk/ecle...itar/style.css

    Works fine in IE.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there lynsey73,

    your links don't work.

    Putting them between [url] and [/url] tags is the cure.

    coothead

  3. #3
    Join Date
    Sep 2011
    Posts
    9

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there lynsey73,

    try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.lynseyhalliday.co.uk/eclecticguitar/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Eclectic Guitar - Gallery</title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        background-image:url(images/background.png);
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-size:100% 100%;
     }
    #container {
        position:relative;
        min-width:1012px;
     }
    h1 {
        padding:20px 0;
        margin:0 0 0 178px;
        font-family:'copperplate gothic light','times new roman',serif;
        font-size:420%;
        font-weight:normal;
        color:#0ff;
     }
    #guitars {
        float:left;
        margin:-30px 10px 0 43px;
     }
    #transbox {
        position:relative;
        float:left;
        width:600px;
        height:1600px;
        margin:14px 0 0 0;
        background-color:#000;
        filter:alpha(opacity=70);
        opacity:0.7;
     }
    #content {
        position:absolute;
        width:600px;
        padding:12px 0;
        top:132px;
        left:408px;
        font-family:'bookman old style','times new roman',serif;
        font-size:100%;
        color:#fff;
     }
    #menu {
        margin:0 0 62px;
        padding:0;
        list-style-type:none;
        text-align:center;
     }
    #menu li {
        display:inline;
        margin:0 9px;
     }
    #menu a {
        font-family:'copperplate gothic light',arial,sans-serif;
        color:#0ff;
        text-decoration:none;
     }
    #menu a:hover {
      text-decoration: underline;
     }
    #content h2 {
        margin:0 0 16px 50px;
        font-style:italic;
        font-size:100%;
        font-weight:normal;
     }
    #content p {
        margin:0 50px;
     }
    #content img {
        display:block;
        margin:10px 50px;
     }
    #tom {
        float:right;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <h1>Eclectic Guitar</h1>
    
    <img id="guitars" src="images/guitars.gif" alt="guitars">
    
    <div id="transbox"></div>
    
    <div id="content">
    
    <ul id="menu">
     <li><a href="index.html">HOME</a></li>
     <li><a href="aboutus.html">ABOUT US</a></li>
     <li><a href="gallery.html">GALLERY</a></li>
     <li><a href="repertoire.html">REPERTOIRE</a></li>
     <li><a href="gigs.html">GIGS</a></li>
     <li><a href="contactus.html">CONTACT US</a></li>
    </ul>
    
    <h2>Recent Gigs</h2>
    
    <p>
    Room, Largs, Friday April 29th 2011 - Film footage of the finale, "Sultans 
    of Swing", is available on YouTube.
    Simply type "eclectic guitar room" into the search bar.
    </p>
    <img src="images/room2.png" alt="room">
    <p>Seaview Café, Wemyss Bay, Saturday 2nd July 2011 </p>
    <img src="images/seaview.png" alt="seaview">
    <p>The Waterside Bar, Largs, Saturday 23rd July 2011 </p>
    <img src="images/water1.png" alt="waterside">
    <img src="images/water2.png" alt="david">
    <img id="tom" src="images/water3.png" alt="tom">
    
    </div><!-- end #content -->
    
    </div><!-- end #container -->
    
    </body>
    </html>
    
    coothead

  5. #5
    Join Date
    Sep 2011
    Posts
    9
    Thanks very much! I'll have a look at your code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles