SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict Eternal Designs's Avatar
    Join Date
    Mar 2002
    Location
    Bay Area, CA, USA
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Design broken when viewed in Firefox or IE

    Hello all!

    I not a noob to web design but having said that have taken a few years off and have been producing designs for mainly print. I created a design for my bro-in-law's business that he liked. I have it mostly built out to pages. I ended up using tables for layout. I know bad designer. But I got tired of trying to get a CSS layout to work and went back to what worked to keep the html as close to the psd. So anyways, the design has a small chrome/metal frame around the page that needs to expand vetically as the content grows. I used a 1 px tile to achive this. I then set the tile as a background image in a table cell. this seemed to work fine. I'm using Dreamweaver CS4. The site renders as expected in the live site view in DW and Safari 3/webkit. When I view it in Firefox 3/gecho based browsers (ie Flock 2) or IE 6/7 the tiles don't completly fill the extended area and the design breaks. I don't know what is causing this. Any help is appeciated. A sample can be viewed here. The tiles are at the bottom and are 1px high starting just above the bottom horizontal frame.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It is just about impossible to get a table based layout to display properly on all the different browsers - just one of the hundreds of reasons why it is a bad idea to create pages that way.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict Eternal Designs's Avatar
    Join Date
    Mar 2002
    Location
    Bay Area, CA, USA
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I had even bigger problems when I attempted a purely CSS based layout. I'm not doing anything crazy in my table layout that Gecko would have a problem with. What makes me scratch my head is webkit has no problem but BOTH Gecko and IE do. In my situation Webkit seems to render best, with both IE and Gecko stumbling in the same place.

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Theres so many problems with that layout I dont know where to begin. I suggest a recode.
    I know table based layouts work. But its not good practice. You must learn CSS & HTML.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  5. #5
    SitePoint Addict Eternal Designs's Avatar
    Join Date
    Mar 2002
    Location
    Bay Area, CA, USA
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I know, but I was trying to get something up and worry about converting it to CSS later. My workflow for this site has been PSD>Fireworks PNG>Dreamweaver. My CSS skills are lacking currently. How is Fireworks CS4 export to CSS & HTML feature? When I tried to hand code the css layout I was having problems getting the border to be able to expand with content. Any suggestions or links to tuts would be great.

    Thanx
    Kevin

  6. #6
    Non-Member
    Join Date
    Oct 2008
    Location
    Banned
    Posts
    506
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you show the code you are having trouble with then we can diagnose easier

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A tableless layout for this site would be quite straightforward due to the fixed width, and it would be MUCH easier to do it now rather than after the site is done. For a properly coded site, there is no direct link between PSD/Fireworks and DW in your workflow. Once you have your design worked out, then you look at the page in terms of content and meaning, and mark up the html accordingly.

    First thing you will probably want to do is change the default new page doctype in Dreamweaver to HTML 4.01 strict - no point to XHTML and new pages should use a strict doctype.

    As all the pages are basically the same apart from the content section, I will just concentrate on the base layout. Looking at a page, you first have a top logo/header image - as this contains the company logo, it can be treated as content so the image may as well stay in the html. There is also a home page link which happens to be over the logo. Following this is a menu. A menu is essentially a list of links, so it can be marked up as an unordered list of text links. Following this you have the main content area with a heading indicating the current page. To the right is another list of links to supplier's sites which can once again be marked up as an unordered list of links - as these links contain supplier's logos, the logo images could be used in the html rather than text, but I have used text links in this exercise.

    Marking up the initial page on the above basis could yield this html :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vacaville Trailer Sales</title>
    </head>
    
    <body>
    <img src="images/header.jpg" alt="logo image">
    <a href="index.html" title="Back to Home Page">Home</a>
    <ul>
    	<li><a href="index.html">Home</a></li>
    	<li><a href="trailers.html">Trailers</a></li>
    	<li><a href="parts.html">Parts</a></li>
    	<li><a href="service.html">Service</a></li>
    	<li><a href="contact.html">Contact</a></li>
    	<li><a href="links.html">Links</a></li>
    </ul>
    <h1>Page Title</h1>
    <p>Content goes here</p>
    <ul>
    	<li><a href="http://bigtextrailers.com/">Big Tex Trailers</a></li>
    	<li><a href="http://www.cargomatetrailer.com">Cargo Mate</a></li>
    	<li><a href="http://www.carry-ontrailer.com">Carry-on Trailer Corp</a></li>
    	<li><a href="http://paceamerican.com">Pace American</a></li>
    	<li><a href="http://pjtrailers.com">PJ Trailers</a></li>
    </ul>
    </body>
    </html>
    Note that no consideration has been made yet to the look or positioning, but the information presented to the viewer is there.

    Refering again to the graphic mockup, we can logically divide things up with divs where needed, giving consideration to what may be required to attach presentational graphics to. The top header image and link can be grouped, the (future) contents area can be grouped, the side bar can be grouped, and a div used to hold the footer image. As the whole site is to be a fixed width and centred, then everything can be wrapped in a div as well. Assigning some id's and class names through the lists, and linking a css file, the html can now look like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vacaville Trailer Sales</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="header">
    		<img src="images/header.jpg" alt="logo image" title="">
    		<a href="index.html" title="Back to Home Page">Home</a>
    	</div>
    	<ul id="nav">
    		<li><a href="index.html" class="home">Home</a></li>
    		<li><a href="trailers.html" class="trailers">Trailers</a></li>
    		<li><a href="parts.html" class="parts">Parts</a></li>
    		<li><a href="service.html" class="service">Service</a></li>
    		<li><a href="contact.html" class="contact">Contact</a></li>
    		<li><a href="links.html" class="links">Links</a></li>
    	</ul>
    	<div id="content">
    		<h1>Page Title</h1>
    		<p>Content goes here</p>
    	</div>
    	<div id="sidebar">
    		<ul id="suppliers">
    			<li><a href="http://bigtextrailers.com/" class="bigtex">Big Tex Trailers</a></li>
    			<li><a href="http://www.cargomatetrailer.com" class="cargomate">Cargo Mate</a></li>
    			<li><a href="http://www.carry-ontrailer.com" class="carryon">Carry-on Trailer Corp</a></li>
    			<li><a href="http://paceamerican.com" class="pace">Pace American</a></li>
    			<li><a href="http://pjtrailers.com" class="pj">PJ Trailers</a></li>
    		</ul>
    	</div>
    	<div id="footer"></div>
    </div>
    </body>
    </html>
    Note that there is still no presentational bling or positioning - that is the role of the css. The html just describes the content.

    Presentation continued next post..

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Next it must be decided how to handle the graphics aspect, and the way the graphics are sliced/extracted from the mockup is different to what you would use for a table layout. The original page body background and header graphics are fine, as is the footer graphic - the rest need a little more work and thought.

    As the whole site is wrapped in a div, the side border graphics and the left column can be all done in one hit with one wide graphic repeated vertically down this wrapper. Such repeated graphics I usually make around 10px in size in the repeated direction - the difference in file size between a 1px slice and a 10px slice is very little, but the 1px slice gives the browser 10 times as much work to do when repeating. Such a full width transparent (8bit png for small size and IE6 compatability) image can look like this : bodyslice.png.

    Likewise, the navbar background can also be a repeated slice nav_bak.jpg, and the sidebar gradient side_bak.jpg.

    To effect the navigation rollovers, it is much better to combine both the normal and hover images into one, and just shift the background position on hover - much simpler than all that javascript. As such, the new menu item graphics can be home.jpg, trailers.jpg, parts.jpg, service.jpg, contact.jpg, and links.jpg. Note that I made these images less the top and bottom borders so that the active area of the links is within those borders.

    I also separated the supplier logo graphics to apply separately to the sidebar links, which will make it easier to change at a later date if need be.

    The css next post..

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css file for all this is :
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    	background-color: #A30601;
    	background-image: url(images/bg-gradient.gif);
    	background-repeat: repeat-x;
    	color: #FFFFFF;
    	padding: 10px 0;
    }
    p {
    	margin-bottom: 1em;
    }
    #wrapper {
    	width: 975px;
    	margin: 0 auto;
    	background-image: url(images/bodyslice.png);
    	background-repeat: repeat-y;
    }
    #header {
    	height: 198px;
    	position: relative;
    }
    #header img {
    	vertical-align: bottom;
    }
    #header a {
    	position: absolute;
    	top: 5px;
    	left: 10px;
    	width: 275px;
    	height: 160px;
    	background-image: url(images/spacer.gif);
    	text-indent: -999em;
    }
    #nav {
    	height: 48px;
    	background-image: url(images/nav_bak.jpg);
    	background-repeat: repeat-x;
    	margin: 0 3px;
    	padding: 4px 0;
    }
    #nav li {
    	list-style: none;
    	float: left;
    	margin: 0 25px;
    	display: inline;
    }
    #nav a {
    	float: left;
    	width: 110px;
    	height: 48px;
    	background-position: center top;
    	font-size: 1px;
    	color: #C9C9C9;
    	background-repeat: no-repeat;
    }
    #nav a:hover {
    	background-position: center bottom;
    }
    #nav .home {
    	background-image: url(images/home.jpg);
    }
    #nav .trailers {
    	background-image: url(images/trailers.jpg);
    }
    #nav .parts {
    	background-image: url(images/parts.jpg);
    }
    #nav .service {
    	background-image: url(images/service.jpg);
    }
    #nav .contact {
    	background-image: url(images/contact.jpg);
    }
    #nav .links {
    	background-image: url(images/links.jpg);
    }
    #content {
    	width: 730px;
    	margin: 10px 0 0 10px;
    	float: left;
    	display: inline;
    }
    #content h1 {
    	text-align: center;
    	font-size: 200%;
    	line-height: 2em;
    }
    #sidebar {
    	width: 220px;
    	float: right;
    	margin-right: 3px;
    	background-image: url(images/side_bak.jpg);
    	background-repeat: repeat-x;
    	display: inline;
    }
    #suppliers {
    	width: 162px;
    	margin-left: 29px;
    	padding-top: 2px;
    }
    #suppliers li {
    	list-style: none;
    }
    #suppliers a {
    	display: block;
    	width: 162px;
    	background-position: center top;
    	text-indent: -999em;
    	background-repeat: no-repeat;
    }
    #suppliers .bigtex {
    	background-image: url(images/bigtex.jpg);
    	height: 48px;
    	margin-top: 16px;
    }
    #suppliers .cargomate {
    	background-image: url(images/cargomate.jpg);
    	height: 75px;
    	margin-top: 30px;
    }
    #suppliers .carryon {
    	background-image: url(images/carryon.jpg);
    	height: 93px;
    	margin-top: 10px;
    }
    #suppliers .pace {
    	background-image: url(images/pace.jpg);
    	height: 80px;
    	margin-top: 11px;
    }
    #suppliers .pj {
    	background-image: url(images/pj.jpg);
    	height: 77px;
    	margin-top: 17px;
    }
    #footer {
    	height: 20px;
    	clear: both;
    	background-image: url(images/footer.jpg);
    	background-repeat: no-repeat;
    	background-position: left bottom;
    }
    It starts off with the universal selector to zero all browser default margins and padding on everything for an even start point (this simple method will remove some defaults on form elements that cannot be reapplied, but it hasn't worried me on any sites I have done - there are other threads on the forum regarding resets if you would prefer to use them). As part of this reset, I reapply a bottom margin only (to avoid margin collapse issues within containers) to <p>s for paragraph spacing. The body gets the appropriate fonts, colours and images, plus I added 10px top and bottom padding for spacing above and below the site.

    The #wrapper div is set to the appropriate width and auto side margins centre it (and the whole site) on the page. The bodyslice background image forms the side borders and left column. The #header div is given a height to match the header image and relative position to provide a reference for the home link. The header image gets is vertical-align property set to "bottom" to avoid the text descender gap below it which causes problems for IE6. The "back to home" link is positioned absolutely over top of the header image, and a negative text indent hides the text from view. The spacer.gig on the link background is for the benefit of IE which will refuse to make the entire <a> linkable unless there is a background.

    The #nav list is set to the height of the navigation background image less the top and bottom borders, and top and bottom padding brings it to the overall correct size of 56px. Side margins bring the navbar in a fraction to prevent covering the site side borders, and the repeated nav_bak image is applied as a background. The #nav <li>s are floated left and side margins space them apart - the inline display is to avoid IE6's doubled float margin bug. The #nav links are also floated to convert them to block display, and given the appropriate size. The link text is reduced to 1px high and coloured to hide it against the graphic background (there are better ways to do text replacement, and these can be found in other threads, but this is simple). The link background images are normally positioned to reveal the top portion, and shifted to reveal the bottom portion on hover. The correct images are applied via the link class names.

    Continued next post ...

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The #content area div is given a width a bit smaller than the distance between the border graphics and floated to the left, with a top and left margin. The inline display is again to counteract IE6's float bug. The <h1> heading is given the appropriate font size and centre text align - the line height provides vertical spacing.

    The #sidebar div is set to the correct width to just fit within the graphic borders supplied by the #wrapper background, and floated to the right with a right margin so it doesn't cover the border. The gradient is applied as a background here, and again the inline display is for IE6's bug. The #suppliers list is given a width to suit the size I sliced the logos at, and the margin spaces it in the horizontal middle of the sidebar. The top padding prevents the top margin of the first <li> pulling the <ul. down due to margin collapse. The supplier links are set to block display with the actual text being indented way off the left of the page - the individual heights, spacing and graphics are applied via the assigned class names.

    The footer div is given a height to make sure there is space below the content and the footer image applied as a background at the bottom of the div. The clear ensures that it sits below the floated content and sidebar divs, and forces the wrapper to surround everything.

    From here, you should be able to insert the content of each page within the #content div, and be able to do it without using any tables (unless there is tabular data to display, that is).

    The demo of all this can be seen here.

    Enjoy

    BTW, this example was done using Dreamweaver 8 in code view - the only way for you to have the control over Dreamweaver.

  11. #11
    SitePoint Addict Eternal Designs's Avatar
    Join Date
    Mar 2002
    Location
    Bay Area, CA, USA
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guess I should refresh once in awhile Thanks for all the pointers. I will go over all this and see if I have any more questions. Seems pretty straight forward. Thanks again. I will post up again when I'm a bit more close to having a template page done.

    Kevin

  12. #12
    SitePoint Addict Eternal Designs's Avatar
    Join Date
    Mar 2002
    Location
    Bay Area, CA, USA
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Centauri - I'm having problems matching your sample. I've uploaded what I did here. I pretty much just went back to my PSD and exported by hand from there. I copied your html/css with the intention of customizing where needed. Here are my issues:

    1. Left border different color than rest of site borders. I used the same export settings on all graphics.
    2. Nav button bg doesn't match navbar bg. Again I used the same export settings for all buttons and bg, and all are from the same file with on the only difference being the text layer is turned off in the bg slice. The nav buttons are in a smartobject. That shouldn't make a difference though.
    3. Bottom of sidebar bg doesn't extend all the way to the bottom of the side bar leaving ~10px bar.
    4. Safari/webkit doesn't render correctly. no site border other than the header. I believe IE is the same.

    None of these problems are present in your example so there must be something I'm missing when copying your code and/or in exporting graphics.

    Below is the HTML & CSS I'm using.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vacaville Trailer Sales</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="wrapper">
        <div id="header">
            <img src="images/header.jpg" alt="logo image" title="">
            <a href="index.html" title="Back to Home Page">Home</a>
        </div>
        <ul id="nav">
            <li><a href="index.html" class="home">Home</a></li>
            <li><a href="trailers.html" class="trailers">Trailers</a></li>
            <li><a href="parts.html" class="parts">Parts</a></li>
            <li><a href="service.html" class="service">Service</a></li>
            <li><a href="contact.html" class="contact">Contact</a></li>
            <li><a href="links.html" class="links">Links</a></li>
        </ul>
        <div id="content">
            <h1>Page Title</h1>
            <p>Content goes here</p>
        </div>
        <div id="sidebar">
            <ul id="suppliers">
                <li><a href="http://bigtextrailers.com/" class="bigtex">Big Tex Trailers</a></li>
                <li><a href="http://www.cargomatetrailer.com" class="cargomate">Cargo Mate</a></li>
                <li><a href="http://www.carry-ontrailer.com" class="carryon">Carry-on Trailer Corp</a></li>
                <li><a href="http://paceamerican.com" class="pace">Pace American</a></li>
                <li><a href="http://pjtrailers.com" class="pj">PJ Trailers</a></li>
            </ul>
        </div>
        <div id="footer"></div>
    </div>
    </body>
    </html>
    Code:
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        background-color: #A30601;
        background-image: url(../images/bg-gradient.gif);
        background-repeat: repeat-x;
        color: #FFFFFF;
        padding: 10px 0;
    }
    p {
        margin-bottom: 1em;
    }
    #wrapper {
        width: 975px;
        margin: 0 auto;
        background-image: url(../images/body_tile.png);
        background-repeat: repeat-y;
    }
    #header {
        height: 198px;
        position: relative;
    }
    #header img {
        vertical-align: bottom;
    }
    #header a {
        position: absolute;
        top: 5px;
        left: 10px;
        width: 275px;
        height: 160px;
        background-image: url(../images/spacer.gif);
        text-indent: -999em;
    }
    #nav {
        height: 48px;
        background-image: url(../images/nav_bg.jpg);
        background-repeat: repeat-x;
        margin: 0 3px;
        padding: 4px 0;
    }
    #nav li {
        list-style: none;
        float: left;
        margin: 0 25px;
        display: inline;
    }
    #nav a {
        float: left;
        width: 110px;
        height: 48px;
        background-position: center top;
        font-size: 1px;
        color: #C9C9C9;
        background-repeat: no-repeat;
    }
    #nav a:hover {
        background-position: center bottom;
    }
    #nav .home {
        background-image: url(../images/home.jpg);
    }
    #nav .trailers {
        background-image: url(../images/trailers.jpg);
    }
    #nav .parts {
        background-image: url(../images/parts.jpg);
    }
    #nav .service {
        background-image: url(../images/service.jpg);
    }
    #nav .contact {
        background-image: url(../images/contact.jpg);
    }
    #nav .links {
        background-image: url(../images/links.jpg);
    }
    #content {
        width: 730px;
        margin: 10px 0 0 10px;
        float: left;
        display: inline;
    }
    #content h1 {
        text-align: center;
        font-size: 200&#37;;
        line-height: 2em;
    }
    #sidebar {
        width: 220px;
        float: right;
        margin-right: 3px;
        background-image: url(../images/sidebar_bg.jpg);
        background-repeat: repeat-x;
        display: inline;
    }
    #suppliers {
        width: 162px;
        margin-left: 29px;
        padding-top: 2px;
    }
    #suppliers li {
        list-style: none;
    }
    #suppliers a {
        display: block;
        width: 162px;
        background-position: center top;
        text-indent: -999em;
        background-repeat: no-repeat;
    }
    #suppliers .bigtex {
        background-image: url(../images/bigtex.jpg);
        height: 48px;
        margin-top: 16px;
    }
    #suppliers .cargomate {
        background-image: url(../images/cargomate.jpg);
        height: 75px;
        margin-top: 30px;
    }
    #suppliers .carryon {
        background-image: url(../images/carryon.jpg);
        height: 93px;
        margin-top: 10px;
    }
    #suppliers .pace {
        background-image: url(../images/pace.jpg);
        height: 80px;
        margin-top: 11px;
    }
    #suppliers .pj {
        background-image: url(../images/pj.jpg);
        height: 77px;
        margin-top: 17px;
    }
    #footer {
        height: 20px;
        clear: both;
        background-image: url(../images/footer.jpg);
        background-repeat: no-repeat;
        background-position: left bottom;

  13. #13
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    re: the navigation - the background image nav_bg.jpg you are using is 2px higher than what I used, so #nav will need an extra 1px padding top and bottom :
    Code:
    #nav {
        height: 48px;
        background-image: url(../images/nav_bg.jpg);
        background-repeat: repeat-x;
        margin: 0 3px;
        padding: 5px 0;
    }
    The problem with the bottom of the right panel is caused by the same issue as the left border. The colour of the bottom of the right panel gradient graphic should match the colour of the body_tile graphic, but they don't and so you see the gap. The whole colouring of the body_tile graphic seems to be off, and that is probably due to the way it is saved - When saving as PNG8's you have to be careful that the actual colours are not changed, so correct selection of the appropriate colour reduction algorithm from the dropbox is needed. The "restrictive (web)" option will definitely alter the colours, and I think the "adaptive" selection might be the best (I hardly ever use photoshop, preferring PaintShopPro for its ease of use). You will then have to run it through a png optimiser program to strip out the colour profile information so that is renders the same cross-browser.

    Haven't got Safari, but your site renders the same in FF, IE and Opera here.

  14. #14
    SitePoint Addict Eternal Designs's Avatar
    Join Date
    Mar 2002
    Location
    Bay Area, CA, USA
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I've been able to fix most the issues to my satisfaction. But the one lingering issue is the sidebar bg doesn't scale. If I add text the sidebar bg only goes to the bottom of the last vendor logo.

    I'm also thinking of changing the color of the bg of the page (to black) but want to keep the same bg gradient in the content area. Is there an easy to do so?

    Thanks.

  15. #15
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A background image will not scale - it can only be displayed at full size and cropped if needed. What is supposed to happen here is that the sidebar section of the repeating body slice graphic should be the same colour as the bottom of the sidebar gradient so that it looks like a seamless continuation. For some reason, they are completely different colours, and this is probably due to picking the wrong colour optimisation method when saving out the body slice graphic from Photoshop.

    PM also sent.

  16. #16
    SitePoint Addict Eternal Designs's Avatar
    Join Date
    Mar 2002
    Location
    Bay Area, CA, USA
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got all my problems with layout licked mostly. I ended up changing the background to a solid color instead of the gradient. No more headaches except it doesn't display the content bg tile in Safari. Not sure why. I'm running Safari 3.2.1 on Leopard 10.5.6. Haven't looked at it in IE, but I think its ok. The Safari display isn't going to be a big issue since the target audience is most likely going to be on IE or Firefox on PCs but I kinda wanna to figure out why its doing it just as a learning experience for myself. Development site here. Now I'm just getting content moved on in. I'll post a link of the finished site when its ready. Thanks for all the help.


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
  •