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 4 of 4
  1. #1
    Junior Member
    Join Date
    May 2008
    Posts
    2
    Member #
    16801
    Wondering if I could get some help with my first site I've designed. The address is www.waverlyfamilydentistry.com In internet explorer it has the two tables with text overlap part of the image. However, this looks fine in Firefox and in Safari on my Mac.

    Please help!! I am completely lost as to what to do next...Any information is greatly appreciated as I am on a deadline!
    Thanks sooooo much!
    -Kim

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    You did your site a little different than most would....
    You made your site background all one huge .jpg image.

    So, without doing much actual testing, I would try this change
    to move your stuff down a little bit ... see the added part in blue ...

    .TopAddress {
    font-family: "Adobe Garamond Pro", "Times New Roman", Times, serif;
    margin-top: 7px;
    margin-right: 14px;
    line-height: 25px;
    font-size: 16px;
    height:200px;
    }


    The problems you are facing are a prime example of why using <table> is
    not the best way for site lay-out. Tables are designed for displaying tabular
    data. <div> along with CSS stylesheets are how layouts should be made.

    Your design is on a deadline though, so drive ahead and try to make your
    tables work. After you finish, you can work on the side to lay it out without
    using tables ... it will be a good learning experience.


  4. #3
    Junior Member
    Join Date
    May 2008
    Posts
    2
    Member #
    16801
    Thank you so much! That worked for most of my problem!

    200px was a little too much so i adjusted and went with about 140 and that looks alot better.

    Now the only thing is in firefox and safari my links on the sidebar are close together and they don't go into my tooth shadow picture. But on Internet explorer they are on top of that tooth shadow and i don't want that.

    What can be done so I can get all those links closer together and not overlapping that shadow picture, and have it look correct in firefox, safari, and internet explorer?

    One more thing- I changed the a:hover to be red when rolled over the side links- but they won't show in safari or firefox- and internet explorer only has a few showing the red when the link is rolled over. Any advice for that?

    Sorry for so many questions, but I am learning so much!
    I truly appreciate the help! Everyone here is wonderful!!!!
    www.waverlyfamilydentistry.com

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I have the solution ...

    First of all, these are your links.
    no more <p> and no more <hr>

    <div class="Links" style="padding-top:0px;"><a href="index.html">Home</a></div>
    <div class="Links"> <a href="AboutDoctor.html">About the Doctor</a></div>
    <div class="Links"> Services<br />
    <br />
    <span class="Services"><a href="Preventive.html">Preventive&nbsp; <span class="Space"></span></a><br />
    <a href="Restorative.html">Restorative&nbsp; <span class="Space"></span></a><br />
    <a href="Selected.html">Selected Services&nbsp; <span class="Space"></span></a><br />
    <a href="Oxyfresh.html">Oxyfresh&nbsp; <span class="Space"></span></a></span></div>
    <div class="Links"> <a href="Hygiene.html">Hygiene</a></div>
    <div class="Links"> <a href="NewPatients.html">New Patients</a></div>
    <div class="Links"> <a href="Financial.html">Financial</a></div>
    <div class="Links" style="border-bottom:none;"><a href="OfficeMap.html">Office Map</a><br /></div>




    Then, the changes to the style portion.
    No more dotted-lines, the red line between is done within .links

    Code:
    <style type="text/css">
    <!--
    body {
    	background-color: #000000;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    margin:0px auto;
    }
    #Layer1 {
    	position:absolute;
    	left:29px;
    	top:10px;
    	width:245px;
    	height:133px;
    	z-index:1;
    }
    .TopAddress {
    	font-family: "Adobe Garamond Pro", "Times New Roman", Times, serif;
    	margin-top: 7px;
    	margin-right: 14px;
    	line-height: 25px;
    	font-size: 16px;
    	height: 140px;
    }
    .Links {
    margin:0px auto;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	font-size: 14px;
    	width:150px;
    	font-weight: bold;
    	padding-bottom:10px;
    	padding-top:10px;
    	border-bottom: 1px solid #c41230;
    }
    div a:hover {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: bolder;
    	color: #C41230;
    	text-decoration: none;
    }
    div a:active {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	color: #C41230;
    	text-decoration: none;
    }
    
    .TextHeading {
    	margin-top: 40px;
    	margin-left: 50px;
    	font-family: "Adobe Garamond Pro", "Times New Roman", Times, serif;
    	font-size: 38px;
    	font-weight: normal;
    }
    .StaffPicture {
    	margin-left: 10px;
    	margin-top: 5px;
    }
    .Foot {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	line-height: 14px;
    	margin-bottom: 5px;
    	margin-right: 14px;
    }
    .Links2 {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	font-size: 14px;
    	margin-top: 20px;
    	margin-right: 30px;
    }
    .TextMain {
    	font-family: "Adobe Garamond Pro", "Times New Roman", Times, serif;
    	font-size: 16px;
    	margin-left: 50px;
    	margin-right: 40px;
    	line-height: 20px;
    }
    .Services {
    	font-size: 12px;
    	line-height: 18px;
    }
    .Space {font-size: 10px}
    a:link {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    a:visited {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    -->
    </style>

    NOTE:
    When you specify the style within <style> ... </style>, those parameters are
    set for the whole page ... example, the red lines between links. But the bottom
    link doesn't need a red line under it, so I use "inline CSS" to turn off that red line
    just for that link. Inline CSS over-rides the CSS at the top of your page.
    The top link doesn't need padding above it, so I used inline CSS to remove that.

    Use your CSS stylesheet to define the look and layout, and use inline CSS to
    tweak any particular spots that vary from the main style.

    Also, this can be used in particular places to fix the IE problem with margins:
    margin:0px auto;


    .



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 04:06 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com