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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Header tags affecting Font/CSS

    Hi there,

    Hope you're all good. I'm having a problem with header tags, hoping someone can help.

    I have a piece of text that looks just as I want it to in the browser. As soon as I add a <h3> into the text, the text below the header is no longer align justified and the font changes colour - in the CSS <body> tag I have a different color to the div where the text appears. When I add the <h3> the text below it picks up the colour assigned in the <body> and the text above it picks up the colour assigned in the div.

    Probably haven't explained it properly. Basically, everything is fine until I add the <h3>. I'm sure it's something obvious that I'm missing (as it tends to be with html!) but I can't figure out what!

    Many thanks in advance for any help

    Rickles

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Can you give a link to your page?

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi, thanks for responding,

    Site is not live yet but here's the page and the CSS. The problem occurs in the content div further down

    HTML:

    <body>

    <div id="container">
    <div id="header">
    <p><a href="contact.html">Contact</a> | <a href="site_map">Site Map</a> | <a href="images/acorn_map_large_2.jpg" rel="lightbox[map]" title="Map to Acorn Ironmongery">Opening Hours</a></p>

    <img src="header_4.png" />
    </div>

    <div>
    <ul id="topnav">
    <li><a href="index.html">Home</a></li>
    <li>
    <a href="hinges.html">About</a>
    <!--Subnav Starts Here-->
    <span>
    <a href="history.html">History</a> |
    <a href="map.html">Map</a> |
    <a href="staff.html">Staff</a> |
    <a href="gallery.html">Gallery</a> |
    </span>
    <!--Subnav Ends Here-->
    </li>
    <li><a href="hinges.html">Brands</a>
    <!--Subnav Starts Here-->
    <span>
    <a href="hafele.html">Hafele</a> |
    <a href="hettich.html">Hettich</a> |
    <a href="carlisle_brass.html">Carlisle Brass</a> |
    <a href="frank_allart.html">Frank Allart</a> |
    <a href="pro_decor.html">Pro Decor</a> |
    <a href="blum.html">Blum</a> |
    <a href="kirkpatrick.html">Kirkpatrick</a> |
    <a href="frelan.html">Frelan</a> |
    <a href="aldridge.html">Aldridge</a> |
    <a href="simonswerk.html">Simonswerk</a> |
    <a href="karcher.html">Karcher</a> |
    <a href="finesse_design.html">Finesse Design</a> |
    <a href="geze.html">Geze</a> |
    <a href="turnstyle_designs.html">Turnstyle Designs</a> |
    <a href="from_the_anvil.html">From the Anvil</a> |
    <a href="strand_hardware.html">Strand Hardware</a> |
    <a href="samuel_heath.html">Samuel Heath</a> |
    <a href="ingersol_rand.html">Ingersol Rand</a> |
    <a href="astroflame.html">Astroflame</a> |
    <a href="clayton_monroe.html">Clayton Monroe</a> |

    </span>
    <!--Subnav Ends Here-->
    </li>

    <li><a href="hinges.html">Ironmongery</a>
    <!--Subnav Starts Here-->
    <span>
    <a href="hinges.html">Hinges</a> |
    <a href="locks.html">Locks</a> |
    <a href="door_closers.html">Door Closers</a> |
    <a href="external_door_furniture.html">External Door Furniture</a> |
    <a href="commercial_fittings.html">Commercial Fittings</a>
    </span>
    <!--Subnav Ends Here-->
    </li>

    <li><a href="hinges.html">Door Handles</a>
    <!--Subnav Starts Here-->
    <span>
    <a href="door_handles_rose.html">Door Handles on Rose</a> |
    <a href="door_handles_backplate.html">Door Handles on Backplate</a> |
    <a href="commercial_door_handles.html">Commercial Door Handles</a>
    </span>
    <!--Subnav Ends Here-->
    </li>

    <li><a href="hinges.html">Doors</a>
    <!--Subnav Starts Here-->
    <span>
    <a href="external_doors.html">External Doors</a> |
    <a href="internal_doors.html">Internal Doors</a> |
    <a href="fire_doors.html">Fire Doors</a>
    </span>
    <!--Subnav Ends Here-->
    </li>

    <li><a href="hinges.html">Windows</a>
    <!--Subnav Starts Here-->
    <span>
    <a href="sash_fittings.html">Sash Fittings</a> |
    <a href="casement_fittings.html">Casement Fittings</a> |
    <a href="french_windows.html">French Windows</a>
    </span>
    <!--Subnav Ends Here-->
    </li>

    <li><a href="hinges.html">Furniture Fittings</a>
    <!--Subnav Starts Here-->
    <span>
    <a href="kitchen_hinges.html">Kitchen Hinges</a> |
    <a href="drawer_runners.html">Drawer Runners</a> |
    <a href="kitchen_handles.html">Kitchen Handles</a> |
    <a href="kitchen_storage.html">Kitchen Storage</a> |
    <a href="bedroom_storage.html">Bedroom Storage</a>
    </span>
    <!--Subnav Ends Here-->
    </li>

    <li><a href="hinges.html">Sectors</a>
    <!--Subnav Starts Here-->
    <span>
    <a href="residential.html">Residential</a> |
    <a href="commercial.html">Commercial</a> |
    <a href="retail.html">Retail</a> |
    <a href="office.html">Office</a>
    </span>
    <!--Subnav Ends Here-->
    </li>
    </ul>
    </div>

    <br />
    <div id="content-container1">
    <div id="content-container2">
    <div id="sidebar">
    <ul class="sidemenu">
    <h2>What We Do</h2>
    <li><a href="services.html"><b>Services <small>>></small></b></h3></a></li>
    <ul class="vmenu">
    <li><a href="services.html">Scheduling</a></li>
    <li><a href="services.html">Site Visits</a></li>
    <li><a href="services.html">Technical Advice</a></li>
    <li><a href="services.html">Trade</a></li>
    <li><a href="services.html">Delivery</a></li>
    </ul>
    <li><a href="brochures.html"><b>Brochure PDFs <small>>></small></b></a></li>
    <li><a href="videos.html"><b>Video Tutorials <small>>></small></b></a></li>
    <li><a href="index.html"><b>Buyer Guides <small>>></small></b></a></li>
    <ul class="vmenu">
    <li><a href="traditional_home_decor.html">Traditional Home Decor</a></li>
    <li><a href="contemporary_styles.html">Contemproary Styles</a></li>
    <li><a href="interior_handles.html">Interior Handles and Knobs</a></li>
    <li><a href="exterior_handles.html">Exterior Handles and Knobs</a></li>
    <li><a href="door_locks_security.html">Door Locks and Security</a></li>
    <li><a href="light_switches_sockets.html">Light Switches and Sockets</a></li>
    <li><a href="builders_ironmongery.html">Builder's Ironmongery</a></li>
    <li><a href="materials_finishes.html">Materials and Finishes</a></li>
    <li><a href="cabient_handles_knobs.html">Cabinet Handles and Knobs</a></li>
    </ul>
    <li><a href="handy_hints_tips.html"><b>Handy Hints and Tips <small>>></small></b></a></li>
    <li><a href="glossary.html"><b>Glossary <small>>></small></b></a></li>
    <li><a href="news.html"><b>News <small>>></small></b></a></li>
    <li><a href="testimonials.html"><b>Testimonials <small>>></small></b></a></li>
    <li><a href="site_map.html"><b>Site Map <small>>></small></a></b></li>
    <li><a href="contact.html"><b>Contact <small>>></small></a></b></li>

    </div>


    <div id="content">

    <h2>Door Hinges</h2>

    <p>
    Here at Acorn Ironmongery we supply virtually any type of range to satisfy a range of applications. See below for an example of the types of hinges we have available and the purpose served by each one. If you have any questions on hinges for internal and external doors, hinges for cupboards and cabinets and any other types of hinges, please don’t hesitate to give us a call.</p>

    <h3>Butt Door Hinges</h3>

    Standard butt door hinges vary in size from 25mm to 200mm but the most common sizes are 64mm, 75mm and 100mm (2.5, 3 or 4 inch). A hinge is usually described by its height, which commonly means the length of the joint knuckle. If this is followed by another side, this is referring to the width of hinge at its full extension.
    <br />
    <img src="images/butt_hinges.jpg" />
    <br />
    64mm butt hinges are used for cabinet and cupboard doors in kitchens and on wardrobe doors in bedrooms. 75mm butt hinges are most commonly fitted to 35mm thick, standard internal doors. Two hinges are usually sufficient for this type of door but three are sometimes used for aesthetic reasons.
    <br /><br />
    100mm hinges are generally fitted to external doors or internal fire doors that are 45mm thick. Please be aware that fire doors, by regulation, must have three hinges per door.

    <h3>Antique Door Hinges and Hinge Fronts</h3>

    <img src="images/antique_hinges.jpg" align="left"/>The hinges used in period properties are often prominent and stunning to look at. Rustic and black antique tee hinges are usually used internally on classic ledged and braced along with a thumb latch, to create a warm, Olde English feel in your home. The ‘T’ part of the hinge is attached to the door frame and the strap of the hinge is attached to the door. Common practice it to make sure the strap is fitted at least half way to two thirds of the way across the door. Two hinges are normally sufficient here.
    <br /><br />
    The T Hinge Effect can be achieved by hanging doors on standard hinges and then putting hinge fronts on either side of the door to give the illusion of T-Hinges. A hinge front is simply a T-hinge strap with no point and ranges in size from 100mm (4”) for small cabinet and cupboard doors to around 762mm (30”) for garage doors. Sizes used on internal doors are 305mm (12”), 380mm (15”) and 450mm (18”).

    <h3>Ball Bearing Hinges</h3>

    Ball bearing hinges have grown in popularity in recent years to the point where the majority of our hinge sales are ball bearing hinges. The two most popular sizes are 100mm x 76mm (4”) and 76 x 50mm (3”). This type of hinge operates by pivoting on a series of small ball race bearings which provides a much smoother action than an un-washered hinge or a non-bearing hinge. Most of the ball bearing hinges we supply have been thoroughly tested and passed fire door tests which means they can be used on both domestic and commercial fire doors.
    <br />
    <img src="images/ball_bearing_hinges.jpg"/>
    <br />
    All our ball bearing hinges are made of steel or stainless steel and come in a variety of robust, hardwearing finishes, such as satin stainless steel, polished stainless steel, simulated brass, antique brass and imitation bronze.
    <br /><br />
    We can also cater for other sizes, finishes, as well as special applications. Please get in touch if this is what you require.

    <h3>Parliament and Projection Hinges</h3>

    Parliament hinges are so called due to the parliament door – not a door that runs the coutry but a door that folds back 180 degrees on itself. These type of doors are usually found between the lounge and dining room or as a pair of external doors leading into the garden.
    <br />
    <img src="images/parliament_hinges.jpg"/>
    <br />
    Parliament hinges are usually made of brass and come in a whole host of quality finishes – polished brass, polished chrome, satin chrome, antique brass, imitation bronze and un-lacquered brass.

    <h3>Storm Proof and Cranked Hinges</h3>

    Storm proof hinges are most commonly associated with timber windows – the classic window design where the sash closes over the frame is known as storm proofing. Such a window requires a specially designed hinge which cranks at 90 degrees. These hinges are usually made of steel, are raw finished or plated and are 63mm in size.
    <br />
    <img src="images/stormproof_hinges.jpg"/>

    <h3>Single and Double Action Spring Hinges</h3>

    Single and double action spring hinges incorporate a spring action within the pivot knuckle. They are characterized by the size of the knuckle, which is usually about twice the size of a standard hinge because of the spring that is built inside.
    <br />
    <img src="images/action_hinges.jpg" />
    <br />
    Single action hinges operate in only one direction. A double action spring hinge operates in two directions which means a door can open both ways. A popular use for a double action spring hinge is on a restaurant or pub kitchen door. Single action hinges are often used in place of a door closer so that a door closes. They are now very popular for domestic fire doors and are often found in new apartment developments.

    <h3>Special Application Hinges</h3>

    <img src="images/special_hinges.jpg" align="right"/>Special applications can include all sorts of hinges, such as counter flap hinges, rising butt hinges, falling butt hinges, table hinges, kitchen cabinet hinges, Soss hinges and many more.
    <br /><br />
    If you require any special application hinges or you have a specific hinge in mind for a project you are working on, please contact us or pop in for a chat and we will be more than happy to help.</p>


    </div>



    <div id="aside">

    <h2>Map</h2>

    <p>Click on the map to see a larger map, opening hours and contact details <small>>></small></p>

    <a href="images/acorn_map_large_2.jpg" rel="lightbox[map]" title="Map to Acorn Ironmongery"><img src="images/acorn_map.jpg" border="0"></a>

    <p>Or take a look at <a href="http://maps.google.co.uk/maps?q=gu10+5dw&hl=en&sll=51.214504,-0.833422&sspn=0.008683,0.019612&vpsrc=0&hnear=Farnham+GU10+5DW,+United+Kingdom&t=m&z=16" target="_blank"><i>Acorn Ironmongery on Google Maps</i></a> and get detailed directions <small>>></small> </p>

    <h2>Gallery</h2>

    <p>Click on any of thumbnails below to take a look at where our showroom and warehouse.</p>

    </div>

    <div id="footer">

    Copyright © Acorn Ironmongery Ltd, 2011 | Site by <a href="http://www.bangbangcreative.co.uk">Bang Bang Creative</a>

    </div>

    </div>
    </div>
    </div>

    </body>
    </html>



    CSS:

    @charset "UTF-8";
    /* CSS Document */

    body {background-image: #fff;
    font-family: georgia, Helvetica, sans-serif;
    font-size: 15px;
    color:#666;
    }

    #container
    {
    margin: 0 auto;
    width: 100%;

    }

    #header
    {
    background:;
    padding: 10px;
    }

    #header h1 { margin: 0; }

    #header a { color:#555; padding:5px 0; margin:0; font-size:1em; border-bottom: 1px dotted #; text-decoration:none}

    #header a:hover {color:#069; text-decoration:none;}

    /*--start of top Nav--*/

    ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 100%;
    list-style: none;
    position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
    font-size: 1.2em;
    background: #1376c9 url(letter.png) repeat-x;
    }
    ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: ; /*--Divider for each parent level links--*/
    }
    ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #fff;
    text-decoration: none;
    }
    ul#topnav li:hover { background: #336699 url(topnav_active.gif) repeat-x; }
    /*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

    ul#topnav li span {
    float: left;
    padding: 10px 0;
    word-spacing:1px;
    position: absolute;
    left: 0; top:35px;
    display: none; /*--Hide by default--*/
    width: 100%;
    background: #09F;
    color: #fff;
    /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }
    ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
    ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
    ul#topnav li span a:hover {text-decoration: underline;}

    /*--end of top Nav--*/


    #content-container1
    {
    float: left;
    width: 100%;
    }

    #content-container2
    {
    float: left;
    width: 100%;
    }


    /* Sidebar */
    #sidebar {width:16%; float:left; margin:1.5% 0 0 0; padding:10px; color:#333; border-righ:1px dotted #999;}
    #sidebar h2 {font-size:1.4em; padding: 7px; background-color:#ccc;}
    #sidebar ul {list-style:none; margin:0 0 15px 0;}
    #sidebar li {padding:10; margin:10;}
    #sidebar ul.sidemenu {width:200px; padding:0; margin:0 0 20px 15px; }
    #sidebar ul.sidemenu li a {color:#555; display:block; padding:5px 0; margin:0; font-size:1em; border-bottom: 1px dotted #; text-decoration:none}
    #sidebar ul.sidemenu li a:hover {color:#069; text-decoration:none;}
    #sidebar ul.sidemenu li a.active {color:#a13538;}
    #sidebar ul.sidemenu ul {width:180px; padding:0; margin:0 0 0 20px;}
    #sidebar ul.sidemenu ul li a {padding:2px 0; margin:0; font-size:1em;}

    /* Lightbox */
    #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }

    #outerImageContainer{ position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; margin-top:-20px;}
    #imageContainer{ padding: 1px; }

    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(Images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(Images/nextlabel.gif) right 15% no-repeat; }
    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: hidden; width: 100%; }

    #imageData{ padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 100%; float: left; text-align: left; }
    #imageData #caption{ font-weight: bold; }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
    #imageData #bottomNavClose{ width: 80px; float: right; padding-bottom: 0.7em; outline: none;}
    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

    /*content*/

    #content
    {
    float: left;
    width: 56%;
    padding: 20px 0;
    margin: 2% 0 0 2%;

    }

    #content p {padding:0px;
    color:#333;
    text-align:justify;}

    #content h2 { margin:0;
    padding:7px;
    background-color:#ccc;
    color:#333;}

    #content h3 { font-size:20px;
    color:#333;}


    #content a { color:#930; padding:5px 0; margin:0; font-size:1em; border-bottom: 1px dotted #; text-decoration:none}

    #content a:hover {color:#069; text-decoration:none;}

    #aside
    {
    float: right;
    width: 16%;
    padding: 20px 0;
    margin: 2% 4% 0 0;
    display: inline;
    }

    #aside h2 { margin:0;
    padding:7px;
    background-color:#C33;
    color:#fff}

    #aside p {padding:10px;
    color:#666;
    size: 12px;}

    #aside a { color:#930; padding:5px 0; margin:0; font-size:1em; border-bottom: 1px dotted #; text-decoration:none}

    #aside a:hover {color:#069; text-decoration:none;}

    #footer
    {
    clear: both;
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
    }

    #footer a { color:#555; padding:5px 0; margin:0; font-size:1em; border-bottom: 1px dotted #; text-decoration:none}














  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Well, if I view your page in FF7 there's no obvious problem, but you have a number of errors in your html, in particular a spare h3 tag here:

    Code:
    <li><a href="services.html"><b>Services <small>>></small></b></h3></a></li>
    [line 326]

    Try running your code through the W3C validator to pick up this sort of thing. There are several other errors as well where you have not closed ul tags that would be better fixed.

    Incidentally, it makes it easier if you post your code wrapped in # tags - then the page isn't so long....

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    21
    Thanks
    3
    Thanked 1 Time in 1 Post
    You've set the CSS to #content p {padding:0px;
    color:#333;
    text-align:justify;}


    ...but you've not enclosed the text after <h3>Butt Door Hinges</h3> with P tags.

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Great, thanks for your replies and advice. Will see how I get on!


  •  

    Posting Permissions

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