Page 2 of 2 FirstFirst 12
Results 11 to 15 of 15

Thread: CSS for resizable image?

  1. #11
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Default

    I can't believe I forgot the body tag. I added it and went to the validator link and the new updated page passes but I still have that small grey line separating between the menu and the image. I don't see anywhere in my css that I have padding.

    http://www.ipcamhd.com/styles-test.css is the main css and I get this after validating
    Sorry! We found the following errors (2)
    URI : http://www.ipcamhd.com/styles-test.css
    61 Invalid ID selector [#3column]
    173 Feature -webkit-min-device-pixel-ratio doesn't exist for media screen ), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
    the css for the nav menu is at http://www.ipcamhd.com/CSS3Menu/css3menu/style.css
    Sorry! We found the following errors (5)
    URI : http://www.ipcamhd.com/CSS3Menu/css3menu/style.css
    12 ul#css3menu1 Property zoom doesn't exist : 1
    13 ul#css3menu1 Parse Error *display:inline;
    13 * Parse Error *padding-right:1.28%;
    13 * Parse Error ;}
    43 Sorry, the at-rule @-moz-document is not implemented.

  2. #12
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    I'm back on iPhone now so I can't investigate CSS specifics.

    The gap *could* be due to any number of issues, but if you've zero'd the margins/paddings on the banner img + containing div, and the menu ul + any containing div, another possible culprit *could* be borders. I say this because the default border width in browsers is 3px, so if you've got a border specified somewhere that is set as transparent but has no width defined, it will default to 3px, which sort of looks like the size of the gap you mentioned. In a case such as this, you would set the border-width to 0 and the gap should vanish.

    But even if there are no borders to blame, you should be able to fix it by setting a negative top margin on the menu div/ul (I can't remember how its contained now) to pull it upwards to meet the banner. Either that or set a negative bottom margin on the banner div to allow the menu to sit a bit higher (assuming that both are relatively positioned)

    Hope that makes sense.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #13
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Default

    OMG this is driving me nuts. I can't believe I can't fix this.

  4. #14
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    Ok - so have you tried dismantling the page and building it up again gradually to pinpoint the problem?

    As a bare minimum, have you tried removing the menu ul/li markup? Does the banner img and main content panel below shunt back together with a nice tight fit (no gap)? If so, there's an issue with margins or paddings on your menus.

    What i suggest is starting over with an empty page and work through the markup, adding each element back in until you find the one that causes the issue. Then target the CSS for that (and its parent and any children) - strip it back and build it back up gradually. This is the easiest way to narrow down CSS issues.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    mlegg (01-19-2013)

  6. #15
    Join Date
    Jan 2009
    Location
    NH
    Posts
    345
    Thanks
    48
    Thanked 8 Times in 8 Posts

    Default

    OK I started cding a new page from scratch and edited some of my css, then I remade the css nav manu. I am all set now.
    thank you so much for hanging with me on this

Similar Threads

  1. Resizable textarea and Opera
    By james438 in forum Computer hardware and software
    Replies: 5
    Last Post: 09-29-2012, 03:30 AM
  2. resizable iframe help
    By wordgeist in forum HTML
    Replies: 8
    Last Post: 05-01-2010, 08:34 PM
  3. resizable and movable popup with javascript
    By autofocus in forum JavaScript
    Replies: 1
    Last Post: 01-22-2010, 02:44 PM
  4. problem of resizable iframe and scrollbar
    By moumou in forum JavaScript
    Replies: 1
    Last Post: 04-24-2009, 06:32 AM
  5. Resizable IFrame
    By arupranjans in forum JavaScript
    Replies: 4
    Last Post: 04-22-2009, 10:36 PM

Tags for this Thread

Bookmarks

Posting Permissions

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