Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Dec 2009
    Posts
    5
    Member #
    20680
    Hi There,
    I have the following CSS Code:

    Code:
    .left-item-content {
     border: 1px solid #B52026;
     padding: 5px 0 0 5px;
     margin: 2px;
     width: 220px;
     background-color: #fbf3f0;
    }
    .menu-item a {
     width: 200px;
     color: #000;
     padding: 2px;
     margin-bottom: 3px;
     background: #ebe3e0;
     border: 1px solid #b52026;
     text-decoration: none;
    }
    .menu-item a:hover {
     background: #fff;
     border: 1px solid #a51016; 
     text-decoration: none;
    }
    ... and I have the following HTML code:
    Code:
      <div class='left-item-content'>
       <div class='menu-item'><a href='index.php'>Home</a></div>
       <div class='menu-item'><a href='whoispraemus.php'>Who is Praemus</a></div>
      </div>
    Does anyone know why the div box around the links does not apply the width, margin and padding properties? It applies the border and background-color, but the div boxes overlap and only go the width of the text.

    It works in IE, but not Chrome or Firefox.


    Any help would be greatly appreciated.

    Thanks,
    Michael

  2.  

  3. #2
    Junior Member
    Join Date
    Jan 2010
    Posts
    2
    Member #
    20772
    First try and fix your single quotes in your html. Example:
    you have <div class='menu-item'>.....change all your single quotes to <div class="menu-item">

    go through all your code and check. This may be the cause why there is a glitch in your css




    Quote Originally Posted by praemus
    Hi There,
    I have the following CSS Code:

    Code:
    .left-item-content {
     border: 1px solid #B52026;
     padding: 5px 0 0 5px;
     margin: 2px;
     width: 220px;
     background-color: #fbf3f0;
    }
    .menu-item a {
     width: 200px;
     color: #000;
     padding: 2px;
     margin-bottom: 3px;
     background: #ebe3e0;
     border: 1px solid #b52026;
     text-decoration: none;
    }
    .menu-item a:hover {
     background: #fff;
     border: 1px solid #a51016; 
     text-decoration: none;
    }
    ... and I have the following HTML code:
    Code:
      <div class='left-item-content'>
       <div class='menu-item'><a href='index.php'>Home</a></div>
       <div class='menu-item'><a href='whoispraemus.php'>Who is Praemus</a></div>
      </div>
    Does anyone know why the div box around the links does not apply the width, margin and padding properties? It applies the border and background-color, but the div boxes overlap and only go the width of the text.

    It works in IE, but not Chrome or Firefox.


    Any help would be greatly appreciated.

    Thanks,
    Michael

  4. #3
    Junior Member
    Join Date
    Dec 2009
    Posts
    5
    Member #
    20680
    Hi sitewidecf,
    The reason I use single quotes is because some of the code uses php and so I can only use single quotes in the echo statement.

    This is a snippet of a much larger webpage, and throughout the page I have only used single quotes whether they be in php code or html code.

    I did try changing from single quotes to double quotes, and sure enough, no change.

    Can you, or anyone else think of something else that may be causing this?

    Thanks,
    Michael

  5. #4
    Junior Member
    Join Date
    Dec 2009
    Posts
    5
    Member #
    20680
    I worked it out. I was trying to set the width of an inline element, which you can't do - you can only set the weidth of block elements. I had to put:
    Code:
    display: inline;
    into my stylesheet.

    Thanks.

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    FYI ... the single quotes, as used with PHP to avoid the mess with double quotes,
    is totally acceptable. It's done all the time, and works fine. It's just important to
    not mix single and double quotes in the SAME tag ... that might cause problems.

    Doing this,
    echo "<a href='http://www.google.com' target='_blank'>";

    is much easier than,
    echo "<a href=\"http://www.google.com\" target=\"_blank\">";

    There's a lot of room for errors within all of those escaped double quotes.


  7. #6
    Junior Member
    Join Date
    Jan 2010
    Location
    Phoenix, Arizona
    Posts
    4
    Member #
    20889
    Hello,

    My issue is similar to praemus' I am having potential CSS and page issues. I tried the "single quote" suggestion but I got no where. I thought if I chime in with my similar issue, perhaps we could mutually find some common answers to our css and page links.

    I have links that intermittently appear on the page, they lead to mp3 files. I suspect that it may have something to do with my "content" box verses my right and left margin box.

    http://joshuakimball.com/soundfiles.htm

    http://joshuakimball.com/styles.css

    Can anyone offer suggestions?
    Also, if the two problems are not similar, I'll be happy to start a separate thread.

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I think #content is getting stuck under your menu ....

    Try this:

    #content {
    padding: 0px 50px 50px 0px;
    background-color: white;
    width:300px;
    float:left;
    }

    #sidebar-a {
    padding: 0px 50px 50px 0px;
    float: left;
    width: 165px;
    background: white;
    height: 3000px;
    }

    #sidebar-b {
    padding: 0px 50px 50px 0px;
    float: right;
    width: 200px;
    background: white;
    height: 3000px;
    }


    Then, arrange the 3 divs in order (left to right) when you do your HTML....

    <div id="sidebar-a">
    stuff
    </div>
    <div id="content">
    stuff
    </div>
    <div id="sidebar-b">
    stuff
    </div>

    Your problem has nothing to do with single or double quotes, by the way.


  9. #8
    Junior Member
    Join Date
    Jan 2010
    Location
    Phoenix, Arizona
    Posts
    4
    Member #
    20889
    Thank you mlseim,

    That totally fixed the problem and it enabled me to finish overhauling my site.

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Josh ...

    You can also stream those MP3's directly from your site using a free MP3 Player.

    See this page:
    http://www.stlukecg.com/podcaster

    Here is the sample page with the player and how to get the code:
    http://www.catpin.com/streaming.php

    You can customize the size, colors, etc.

    The player is actually a part of a WordPress plug-in, but it works by itself.


  11. #10
    Junior Member
    Join Date
    Jan 2010
    Location
    Phoenix, Arizona
    Posts
    4
    Member #
    20889
    Nice, thanks


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:35 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com