SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26

Hybrid View

  1. #1
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal list menu issue

    Hi, I'm having trouble with a horizontal list using background images for each item. I realize I'm supposed to have display: inline for this, but this doesn't put my nav items horizontally when I change it, and the buttons lose all their sizing, as opposed to looking correct if they stayed in a vertical menu. Can I please get some help with this issue? Its been a while since I've done any CSS, thanks.

    Client temp site:
    http://pertmc.com/temp/index.php

    Please see the attachment to see what the menu is supposed to look like.
    Attached Images Attached Images
    Personal Portfolio
    Paul O'B is the CSS god

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    Float to fix.
    Code:
    #navigation {
    	list-style: none;
    	margin: 0 0 0 30px;
    	padding: 0;
    }
    #navigation li { float: left }
    #navigation li a {
            float: left;
    	background: url(../media/menuTab.png) no-repeat;
    	color: #fff;
    	font: 0.65em bold Verdana, Arial, Helvetica, sans-serif;
    	height: 17px;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	text-decoration: none;
    	width: 112px;
    }
    #navigation li a:hover, #navigation li a:focus {
    	background: url(../media/menuTab_over.png) no-repeat;
    	text-align: center;
    	text-decoration: none;
    }
    and remember to clear

    I don't set a fixed height on elements like this to give them room to grow if necessary - Use padding to add space around the element.

  3. #3
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! A list of small issues:

    1) How come there is 30px of space to the left of the menu?
    2) As in the template, there should be no space between the bar.png and the top of the menu. Theres a gap right now.
    3) How do I push the text down a pixel?

    Thanks very much.
    Personal Portfolio
    Paul O'B is the CSS god

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    1) How come there is 30px of space to the left of the menu?
    Code:
    #navigation {
    	list-style: none;
    	margin: 0 0 0 30px;
    	padding: 0;
    }
    2) As in the template, there should be no space between the bar.png and the top of the menu. Theres a gap right now.
    This is invalid - you can't have multiple elements with the same id.
    Code:
    <div id="navigation">
    			<img src="media/bar.png" alt="">
    <ul id="navigation">
    	<li><a href="home.php">Home</a></li>
    	<li><a href="aboutUs.php">About Us</a></li>
    	<li><a href="services.php">Services</a></li>
    
    	<li><a href="clients.php">Clients</a></li>
    </ul>		</div>
    I would lose the div and the image all together and give the list a border-top.

    3) How do I push the text down a pixel?
    Just give the anchors a padding-top: 1px;

    You can use line-height to vertically center text within an element
    Code:
    #navigation li a {
        line-height: 2em;
    }

  5. #5
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    This is invalid - you can't have multiple elements with the same id.

    I would lose the div and the image all together and give the list a border-top.
    I understand ... actually the multiple element thing answered both the first two questions, I now have the nav sitting where I want it to, although I needed a negative top margin. Thanks.

    Quote Originally Posted by markbrown4 View Post
    Just give the anchors a padding-top: 1px;
    Well yes that would seem obvious wouldn't it? I tried that before to no effect, now a bit of padding seems to work. Odd ... thanks anyway though.

    I'm having footer issues now, but should I start a new thread about that? I want the footer to sit at the bottom of the "leftContainer" div, just one column ... FF is scrolling with it now and theres a bit of overlap when resizing the window smaller vertically.

    Thanks again mark.
    Personal Portfolio
    Paul O'B is the CSS god

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Well yes that would seem obvious wouldn't it? I tried that before to no effect, now a bit of padding seems to work. Odd ... thanks anyway though.
    Padding doesn't behave the same way on inline elements - when you float something it makes it block level and the padding works as you would expect.

    I'm having footer issues now, but should I start a new thread about that? I want the footer to sit at the bottom of the "leftContainer" div, just one column ... FF is scrolling with it now and theres a bit of overlap when resizing the window smaller vertically.
    The reason it's pushing the sidebar under the content is because there's not enough space to fit them both side by side.
    You could add a all-containing div and set it to a fixed width to stop this happening.
    Thanks again mark.
    No problemo

  7. #7
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I'm following you correctly Mark ... are you able to see my attachment in the first post? Thats what the page should look like.

    There is a gap underneath the footer at the moment, in both IE and FF. I need to erase that gap, but the footer is only supposed to go across one column, the "leftContainer" div, not both columns. Unless I completely missed what you're trying to say ...
    Personal Portfolio
    Paul O'B is the CSS god

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The gap at the bottom is because you have set 100&#37; height and 10px padding making the whole thing 10px too big.

    Code:
    #leftContainer {
        background: url(http://pertmc.com/temp/media/mainShadow.png) repeat-y right;
        min-height: 100%;
        padding: 0 0 10px 0;
        position: relative;
    }
    Remove the padding and the gap will disappear.

    You need to re-think your layout as you are trying to match two independent columns to be the same height by using 100% height and that just won't work.

    You should use one image on the main page wrapper to give you your columns and background colours all in one go. This main wrapper is the only element that can be min-100% height and then you just float your side columns inside this wrapper over the column backgrounds.

    You can't set 100% height and min-height:100% on the same element as they are mutually exclusive. All you get is 100% height and no expansion further. You need min-height for good browsers and height:100% only for ie6 and under in a separate ie only style.

    See the faq on 100% height for more info

    The footer technique is also covered in the faq. You will need to place a spacer in the flow that is the same height as the footer so that the footer is preserved, This spacer can be padding on the content that lies above the footer or as in my example a clearfooter empty div which will do the job.

    Hope that helps

  9. #9
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL damnit Paul I was just working on it, and fixed the padding issue in the footer. You taught me that a couple years ago I think and I looked back at old threads to fix it. Problem is that I'm not working on CSS often enough to remember all these tricks and whatnot.

    1) Padding removed.
    2) The problem is the shadow background image along the right side of the two columns, these need 100&#37; height to work correctly.
    3) I've changed all the elements accordingly, and actually the site looks better in Ie6 right now than it does in IE7 or FF lol
    4) I'm just reading your old faqs again about the footer, lemme work on that

    Thanks Paul
    Personal Portfolio
    Paul O'B is the CSS god

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Re 2) You can't use two columns of 100&#37; because they will not grow together should one increase more than the other.

    Just use one background image which could actually go on the body in your case. You could also greatly simplify the code needed this way

    e.g.

    http://www.pmob.co.uk/temp/ramsay.htm

    Remember also that IE will not display transparent pngs properly so avoid using then or you will need to use the alpha image loader which is a pain to use.


    Hope that helps

  11. #11
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help Paul, just one question though ... it was getting complicated because of the gradients. Do you have an easier way for me to get the vertical gradient in there? Its this file: http://pertmc.com/temp/media/bg.png

    Also, I designed the template thinking that the PNg transparency issues have been resolved for IE7 ... am I wrong about that? I thought that was one of the major issues fixed?
    Personal Portfolio
    Paul O'B is the CSS god

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well it just goes to show what I was saying about simplifying things as I can't even see that gradient and I have a top of the range monitor lol

    I assume its just a gradient that goes on the right column. If thats the case then the easiest solution would be to make the image 250px wide x 581px and just place it in the right background of the #outer div in my example. This would then lie over the left column. You would need to make it all fit exactly of course.

    I know it means a bigger image file but its an easy solution and no overhead in html so there is some offset to the extra image weight.

  13. #13
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The vertical gradient goes across the entire template, please see my attachment in the original post of this thread to view.

    I'm working on it, thanks.
    Personal Portfolio
    Paul O'B is the CSS god

  14. #14
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, caught up with your recommended changes Paul:

    http://pertmc.com/temp/

    Now for that vertical gradient ... I can't just add it to #outer of course as that overrides the nice shadows in the columns.
    Personal Portfolio
    Paul O'B is the CSS god

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That does complicate things a bit

    There are two things you can try that I can think of.

    1) Make an image with the gradient and columns all included and then just overlay that on #outer so that the bottom matches up with the body background so that when the gradient finishes it merges in with the other image. Of course this would need an image of 950x 581 which may be a bit too heavy for this method.

    2) You could put the repeating image in the background of the leftside and rightside containers. You would of course need to ensure that these containers steer clear of the shadow and could be a bit tricky to get right but as the gradient is quite subtle it shouldn't look out of place.

    You will then need to set a minimum height for both the left and rightside containers so that all the gradient shows. As the gradient is 581px (or whatever) high then you would use code like this.
    Code:
    #rightSide{min-height:581px}
    * html #rightSide{height:581px}
    #leftSide{min-height:581px}
    * html #leftSide{height:582px;}
    (You need to add the image repeating along the x-axis in the styles above of course.)

    I haver updated my example to show this in action:

    http://www.pmob.co.uk/temp/ramsay.htm
    (refresh your browser to make sure you see the new version)

    The drawback is that you need to set the minimum height of the gradient but I guess that would be an issue whatever method you used.

  16. #16
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    That does complicate things a bit

    There are two things you can try that I can think of.

    1) Make an image with the gradient and columns all included and then just overlay that on #outer so that the bottom matches up with the body background so that when the gradient finishes it merges in with the other image. Of course this would need an image of 950x 581 which may be a bit too heavy for this method.

    2) You could put the repeating image in the background of the leftside and rightside containers. You would of course need to ensure that these containers steer clear of the shadow and could be a bit tricky to get right but as the gradient is quite subtle it shouldn't look out of place.

    You will then need to set a minimum height for both the left and rightside containers so that all the gradient shows. As the gradient is 581px (or whatever) high then you would use code like this.
    Code:
    #rightSide{min-height:581px}
    * html #rightSide{height:581px}
    #leftSide{min-height:581px}
    * html #leftSide{height:582px;}
    (You need to add the image repeating along the x-axis in the styles above of course.)

    I haver updated my example to show this in action:

    http://www.pmob.co.uk/temp/ramsay.htm
    (refresh your browser to make sure you see the new version)

    The drawback is that you need to set the minimum height of the gradient but I guess that would be an issue whatever method you used.
    1) I would rather not use this method as it is bulky, unprofessional and increases the file size almost five fold.
    2) I believe this is what I was trying to achieve before, but I'm not fully understanding where you're coming from Paul. There are 3 images and a background colour to consider, the mainShadow (goes along the right side of the left column), rightShadow (goes along the right side of the right column), and bg (horizontally repeating bg image for the gradient).

    I just looked at the newer example, and the shadows don't look correct ... not sure what happened there. The shadow on the mainShadow has a solid colour to transparency, whilst the rightShadow has a solid colour to a solid colour since the solid red BG on the right there has no gradient. The gradient bg is a solid colour to solid colour and no transparency.

    Quote Originally Posted by Paul O'B View Post
    Yes IE7 is ok with png transparency/opacity - its ie6 and ie5.5 that need the alpha image loader (ie5 has no feature for opacity at all)
    Thought so, I'm designing for IE7 + FF, and for IE6 in general (minus the transparency issue, unless I find more time to work on the alpha image loader later).

    Thanks for your continuing help Paul.
    Personal Portfolio
    Paul O'B is the CSS god

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Also, I designed the template thinking that the PNg transparency issues have been resolved for IE7 ... am I wrong about that? I thought that was one of the major issues fixed?
    Yes IE7 is ok with png transparency/opacity - its ie6 and ie5.5 that need the alpha image loader (ie5 has no feature for opacity at all)

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You will need to make some compromises somewhere on this I feel. The shadows are just a repeated sliced image.

    e.g. this one:

    http://www.pmob.co.uk/temp/images/ramsaybodybg2.jpg

    Obviously as it is in the body then we can't have the shadows in front of your gradients. I suppose you could nest another div inside the right and left sides and then overlay the shadow again. You would need to make the inner divs have the same min-height routines as their parents and in that way you get your shadow on top of the gradient and finishing at the same place.

    I only did the example roughly so you should be able to make a better job using better quality images.

    Your original example failed because you were trying to set 2 100&#37; high elements to match each other when they grew but this is not possible. Only one element would have increased and the other would have stayed at its original height. Thats why I inserted a background image on the body so that the continuity continues.

    I'm sure if you mess around with what I've said that you will get near to what you wanted

  19. #19
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I'm really confused now ... I've been trying for about an hour to get those shadows in over the gradients. My latest attempt included floating everything in each column to the left then floating the shadow div to the right. I'm just not getting it. I'm not sure how to get 100&#37; height in any viewport with this. Sorry Paul I'm trying to understand As close as I came is what I originally had set up before I made this thread ...
    Personal Portfolio
    Paul O'B is the CSS god

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Unless I'm mistaken your gradient is only 581px high so this is the only height you need to make certain of. After 581px you can use the repeating background image on the body to take over because there are no gradients left to worry about.

    Or am I missing something again.? I find it hard to notice any difference with your layout and the one I posted but my eyes may not be as good as yours Also my monitor is a flat screen (top of the range) but it probably doesn't show as well as normal monitors or mac systems.

    As I said above you just need to nest another div in each of the left and right columns and apply the shadow there using the same method we did for the gradient. Of course the shadow will need to be repeated down that element.

    I'll have another look (and think) tomorrow if you can't work it out

  21. #21
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I'm using a top-of-the-line 24" LCD as well so its not a display issue with the monitor I'm sure

    Yes the gradients are subtle, but they are meant to be and thats how the client likes it

    Ok I've fixed the footer again, and the heights. I have cleaned things up a bit, but I'm still having trouble with the inner divs with the shadows in them: #leftShadow and #rightShadow in the CSS. Please see what you can do ... thanks a lot.
    Personal Portfolio
    Paul O'B is the CSS god

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I was thinking of something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>PERT&amp;MC - Practical, Tailored Business Solutions</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <meta name="copyright" content="COPYRIGHT &copy; 2007 PERT&amp;MC. ALL RIGHTS RESERVED." />
    <meta name="Description" content="Pacific Employee Relations, Training &amp; Management Consulting" />
    <meta name="Keywords" content="T.J Schmaltz, PERT&amp;MC, " />
    <script type="text/javascript" src="js/onload.js"></script>
    <script type="text/javascript" src="js/checkForm.js"></script>
    <link href="css/global.css" rel="stylesheet" type="text/css" />
    <style>
    /* ---------- Page Head and Body ---------- */
    /* Commented Backslash hack for IE5 Mac \*/ 
    html, body {
        height: 100&#37;;
        /* End hack */
    }
    html, body {
        border: 0;
        margin: 0;
        padding: 0;
    }
    body {
        background: #5e0022;
    }
    h1, h2, h3, h4, h5, h6 { 
        border: 0;
        margin: 0;
        padding: 0;
    }
    img {
        border: 0;
        margin: 0;
        padding: 0;
    }
    
    /* ---------- Anchor links ---------- */
    a:link, a:visited, a:active {
        color: #5e0022;
        text-decoration: none;
    }
    a:hover {
        color: #474747;
        text-decoration: underline;
    }
    
    /* ---------- Layout ---------- */
    #outer {
        background: #ecebe4 temp/media/bodyBG.gif) repeat-y;
        min-height: 100%;
        width: 948px;
    }
    * html #outer {
        height: 100%;
    }
    #leftSide {
        background: #ecebe4 temp/media/bg.png) repeat-x;
        float: left;
        width: 697px;
    }
    #leftShadow {
        background: temp/media/mainShadow.png) repeat-y right top;
        min-height:581px;
        padding-bottom:1em;
    }
    * html #leftShadow {height:581px}
    #rightSide {
        background: #ecebe4 temp/media/bg.png) repeat-x;
        float: left;
        width: 250px;
    }
    #rightShadow {
        background: temp/media/rightShadow.png) repeat-y right top;
        min-height:581px;
        position:relative;
        left:1px;
        padding-bottom:1em;
    }
    * html #rightShadow {height:581px}
    
    #footer {
        color: #5e0022;
        font: 0.65em Verdana, Arial, Helvetica, sans-serif;
        margin: -50px 0 0 30px;
        position: relative;
        width: 636px;
    }
    
    /* ---------- Navigation ---------- */
    #navigation {
        list-style: none;
        margin: -4px 0 0 30px;
        padding: 0;
    }
    #navigation li {
        float: left;
    }
    #navigation li a {
        float: left;
        background: temp/media/menuTab.png) no-repeat;
        color: #fff;
        font: 0.65em Verdana, Arial, Helvetica, sans-serif;
        height: 17px;
        margin: 0;
        padding: 2px 0 0 0;
        text-align: center;
        text-decoration: none;
        width: 112px;
    }
    #navigation li a:hover, #navMenu li a:focus {
        background: temp/media/menuTab_over.png) no-repeat;
        color: #5e0022;
        text-align: center;
        text-decoration: none;
    }
    
    /* ---------- Left Side ---------- */
    .header_logo {
        margin: 24px 0 0 30px;
    }
    #content {
        margin: 0 30px;
        width: 616px;
    }
    #content p {
        color: #474747;
        font: 0.85em Verdana, Arial, Helvetica, sans-serif;
    }
    
    /* ---------- Right Side ---------- */
    #rightSide p {
        color: #474747;
        font: 0.85em "Garamond", Times New Roman, Times, serif;
        margin: 10px 0 0 15px;
    }
    #rightSide p .title {
        font-weight: bold;
    }
    #contactForm {
        margin: 16px 0 0 15px;
    }
    #contactForm p {
        margin: 0;
        padding: 0 11px 9px 11px;
    }
    #contactForm p label {
        color: #5e0022;
        font: 0.65em Verdana, Arial, Helvetica, sans-serif;
    }
    .contact_logo {
        margin: 26px 0 6px 52px;
    }
    form {
        border: 1px solid #5e0022;
        width: 200px;
    }
    .inputText {
        color: #474747;
        font: 0.55em Verdana, Arial, Helvetica, sans-serif;
    }
    
    /* ---------- Form Process ---------- */
    
    
    /* ---------- Footer ---------- */
    /*#footer {
        clear: both;
        color: #5e0022;
        font: 0.65em Verdana, Arial, Helvetica, sans-serif;
        height: 33px;
        margin: 0 0 0 30px;
        padding: 0;
        width: 636px;
    }
    
    * html #footer{
        margin-bottom: -1px;
    }*/
    .footer_navigation {
        float: left;
    }
    .footer_copyright {
        float: right;
    }
    
    /* ---------- Extra ---------- */
    .clear {
        clear: both;
        height: 1px;
        overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="leftSide">        <div id="leftShadow">
    
            <div id="header"> <img class="header_logo" src="media/header_logo.png" width="181" height="81" alt="PERT&amp;MC - Practical, Tailored Business Solutions" /> <img class="header_logo" src="media/bar.png" width="637" height="2" alt="" /> </div>
            <ul id="navigation">
                <li><a href="home.php">Home</a></li>
                <li><a href="aboutUs.php">About Us</a></li>
                <li><a href="services.php">Services</a></li>
                <li><a href="clients.php">Clients</a></li>
            </ul>
            <div class="clear"></div>
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris malesuada ipsum non elit. Donec odio mauris, pellentesque a, scelerisque non, molestie eget, ipsum. Phasellus vestibulum est id diam. Donec mauris. Sed viverra turpis nec metus. Duis pharetra, leo semper aliquet pretium, nulla justo feugiat justo, non sodales ante justo at lacus. Nunc laoreet turpis ac diam. Donec urna. Suspendisse vehicula, lectus sed lacinia hendrerit, eros nulla molestie sapien, sit amet consectetuer erat nulla id risus. Phasellus sem ipsum, porttitor vel, pharetra ac, dignissim nec, dolor.</p>
                <p>Morbi cursus semper sapien. Vestibulum tortor risus, ullamcorper non, vestibulum non, suscipit sed, enim. Vestibulum enim felis, interdum in, dapibus et, pulvinar nec, enim. Donec ante. Nunc accumsan. Vestibulum lacinia diam id sapien euismod scelerisque. Curabitur ut nulla ut nisi scelerisque rhoncus. Aliquam non arcu sed velit eleifend consectetuer. Donec ac nunc vitae eros rutrum tempus. Praesent fermentum vulputate est. Phasellus vehicula. Cras dapibus aliquam sapien. Nullam mattis tempus diam. Donec convallis facilisis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum dapibus laoreet nisi. Sed tincidunt tempus mauris. Nullam pharetra, ipsum a mattis interdum, massa ipsum placerat turpis, ut convallis augue ligula eu sapien. Fusce lacinia. Curabitur nec libero.</p>
                <p >Proin cursus, eros quis placerat viverra, nisl lectus pulvinar turpis, tempor luctus massa felis eu mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sem ante, nonummy et, malesuada sed, placerat vel, justo. Praesent suscipit. Pellentesque porttitor accumsan est. Nullam arcu justo, posuere ac, bibendum vitae, tempor id, metus. Phasellus augue. Morbi elementum mi sed mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus urna. Nam cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla consequat velit a arcu. Mauris mi quam, vestibulum condimentum, tempus ut, bibendum ut, nibh. Donec neque odio, gravida eu, tempor sed, semper id, risus. Duis faucibus nisl id orci.</p>
            </div>
        </div></div>
        <div id="rightSide"><div id="rightShadow"> <img class="contact_logo" src="media/contact_logo.png" alt="PERT&amp;MC Logo"/>
            <p><span class="title">Contacts:</span><br />
                Office: (604) 209-2337<br />
                Facsimile: (604) 777-9730</p>
            <p><span class="title">Mailing Address:</span><br />
                #405 - 215 12th Street<br />
                New Westminster, BC<br />
                V3M 4H4<br />
                Canada<br />
                <a href="http://maps.google.ca/maps?f=q&amp;hl=en&amp;geocode=&amp;q=405+-+215+12th+Street,+New+Westminster,+BC&amp;sll=49.201861,-122.923098&amp;sspn=0.011749,0.033817&amp;ie=UTF8&amp;z=16&amp;iwloc=addr&amp;om=1" rel="external">Map / Directions</a> </p>
            <div id="contactForm">
                <form action="formProcess.php" method="post" onsubmit="return checkform(this);">
                    <p>
                        <input type="hidden" name="required" id="required" value="name,company,phone,email,message" />
                    </p>
                    <p>
                        <label for="name">Name:</label>
                        <br />
                        <input name="name" type="text" class="inputText" id="name" value="" size="32" alt="Name" />
                    </p>
                    <p>
                        <label for="company">Company:</label>
                        <br />
                        <input name="company" type="text" class="inputText" id="company" value="" size="32" alt="Company" />
                    </p>
                    <p>
                        <label for="phone">Phone no#:</label>
                        <br />
                        <input name="phone" type="text" class="inputText" id="phone" value="" size="32" alt="Phone" />
                    </p>
                    <p>
                        <label for="email">E-mail Address:</label>
                        <br />
                        <input name="email" type="text" class="inputText" id="email" value="" size="32" alt="Email" />
                    </p>
                    <p>
                        <label for="message">Message:</label>
                        <br />
                        <textarea name="message" class="inputText" cols="29" rows="6" id="message"></textarea>
                    </p>
                    <p>
                        <input type="image" name="submit" src="media/formButton_submit.png" />
                        <input type="image" name="clear" src="media/formButton_clear.png" />
                    </p>
                </form>
            </div>
    </div>
        </div>
        <div class="clear"></div>
    </div>
    <div id="footer"> <img src="media/bar.png" alt="" />
        <p class="footer_navigation">Home &#183; <a href="aboutUs.php">About Us</a> &#183; <a href="services.php">Services</a> &#183; <a href="clients.php">Clients</a></p>
        <p class="footer_copyright">COPYRIGHT &copy; 2007 PERT&amp;MC. ALL RIGHTS RESERVED.</p>
    </div>
    </body>
    </html>

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    well so its not a display issue with the monitor I'm sure
    No, I was only indicating that with my eyes and my monitor the effect was lost on me

  24. #24
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, its looking much better now, thanks to your help.

    A few minor issues:
    1) The space underneath the menu - theres a space under the navigation in FF but not in IE7 or 6, is the space not there because of collapsible margin issues? The way it looks in FF is the way its supposed to look. Also see my original attachment if you like for reference.
    2) Space above the footer - Same issue as no.1, is it collapsible margins?
    3) I would like a consistent look across browsers with the form and its elements, although this may be impossible. Some input fields are yellow and some are white in FF, why is this? Also the fields are smaller in IE, why is that?

    These are just minor things, the major problems are all gone now Thanks again Paul, and markbrown4.
    Personal Portfolio
    Paul O'B is the CSS god

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I'm a bit pushed for time this evening but 1) and 2 looks like you haven't taken care of the top margin on the p tag. Remember that Firefox applies a top margin to elements such as p, h1, h2 etc and IE doesn't

    If the input fields are yellow then this is probably your autofill feature from the google toolbar and nothing to do with the css.

    Form elements are not consistent across browsers and some elements can't be styled . You would need to make sure you give the textarea a width and height and you will probably need to offer IE a different width using conditional comments if you want it to be exact.

    I didn't have time to look at the code today but that shluld address some issues


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
  •