19 replies [Last post]
jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

Hey Everyone!

A new user to these forums, but I must say I have gotten quite a bit of help out of them over the past few days as I plunged back into the world of web-development. I haven't actively developed much beyond personal things in 3+ years so there was a lot of catching up to do with all this CSS/standard designing.

That said, I have the project of redeveloping the website for the company I work for. I've built the site on the Typo3 CMS. I'm now to the point that the overall "design" is largely complete and I think I'm ready to plunge into the content sections/designing how that layout.

However before I move to that next step. I would love it if you CSS/standard experts would nitpick and take a look at what I have done so far. I've done my best, however please let me know what I should do different/better. This site has already been a help just through searching & I would love some more help.

Here is the site link: http://www.scoolservices.com/dummy-4.0.4

I have a doctype that I believe is correct (used your article to make sure). The doctype is "transitional", I understand that the "strict" is considered better, however Typo3 renders some border, target, and a few other elements that weren't right in strict, it would have taken a lot of code to change all of that. I will probably plunge into changing it as much as I can once I'm finished. According to the w3c validator it validates for transitional.

Here is the CSS files.

This is the front page CSS:

/* Orange CSS */

BODY {
margin: 0px;
}
#overview {
height: 100%;
}
a img {
border: none;
}

/* Header area */
#header {
width: 780px;
height: 110px;
background-repeat:no-repeat;
background-image:url(../images/header_back.jpg);
position:relative; top: 0px;
}
#topnav {
position:absolute; top: 15px; left: 160px;
}
#topsearch {
position:absolute; top: 13px; left: 610px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#topsearch .text {
border: 1px solid #FFFFFF;
background-color: #FFCC66;
}
#topsearch .go-button {position:absolute; top: 3px;}
#topsearch a:link {color: #FFFFFF;}
#topsearch a:visited {color: #FFFFFF;}
#topsearch a:active {color: #FFFFFF;}
#topsearch a:hover {color: #FFFFFF;}
#topsearch a {text-decoration: none; color: #FFFFFF;}

/* Upper white area */
#upperwhite {
height: 127px;
width: 780px;
background-image:url(../images/upperwhiteline.jpg);
background-repeat: no-repeat;
position:relative;
float: left;
}

/* Content area */
#content {
width: 765px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding-right: 15px;
padding-bottom: 2px;
background-color:#FFCC66;
position:relative;
clear: left;
}

*html #content{
margin-top:-4px;/*for ie6*/
}

/* Food bar area */
#foodbar {
height: 111px;
width: 780px;
background-image:url(../images/foodbanner.jpg);
background-repeat:no-repeat;
position:relative;
float: left;
}
#footer {
width: 780px;
position:relative; top: 3px;
float: left;
}
#footernav {
position:absolute; top: 2px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#footersearch {
position:absolute; top: 1px; left: 440px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#footerinfo {
position:absolute; top: 45px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
#footersearch .text {
border: 1px solid #333333;
background-color: #FFCC66;
}
#footersearch .go-button {
position:absolute; top: 3px;
}
#footersearch a:link {color: #333333;}
#footersearch a:visited {color: #333333;}
#footersearch a:active {color: #333333;}
#footersearch a:hover {color: #333333;}
#footersearch a {text-decoration: none; color: #333333;}

This is the subpage CSS:

/* Purple CSS */ BODY { margin: 0px; } #overview { height: 100%; } a img { border: none; } /* Header area */ #header { height: 110px; width: 780px; background-repeat:no-repeat; background-image:url(../images/header_back.jpg); position:relative; top: 0px; } #topnav { position:absolute; top: 15px; left: 160px; } #topsearch { position:absolute; top: 13px; left: 610px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10px; } #topsearch .text { border: 1px solid #FFFFFF; background-color: #CC9999; } #topsearch .go-button {position:absolute; top: 3px;} #topsearch a:link {color: #FFFFFF;} #topsearch a:visited {color: #FFFFFF;} #topsearch a:active {color: #FFFFFF;} #topsearch a:hover {color: #FFFFFF;} #topsearch a {text-decoration: none; color: #FFFFFF;}

/* Upper white area */
#upperwhite {
height: 74px;
width: 765px;
background-image:url(../images/upperwhiteline.jpg);
background-repeat: no-repeat;
position:relative;
z-index: 5;
padding-left: 15px;
padding-top: 53px;
float: left;
}

*html #content{
margin-top:-33px;/*for ie6*/
}

/* Content area */
#content {
width: 760px;
min-height: 100px;
background-color:#CC9999;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding: 10px;
position:relative;
clear: left;
}

/* Food bar area */
#foodbar {
height: 111px;
width: 780px;
background-image:url(../images/foodbanner.jpg);
background-repeat:no-repeat;
position:relative;
float: left;
}
#footer {
width: 780px;
position:relative; top: 3px;
float: left;
}
#footernav {
position:absolute; top: 2px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#footersearch {
position:absolute; top: 1px; left: 440px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#footerinfo {
position:absolute; top: 45px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
#footersearch .text {
border: 1px solid #333333;
background-color: #CC9999;
}
#footersearch .go-button {
position:absolute; top: 3px;
}
#footersearch a:link {color: #333333;}
#footersearch a:visited {color: #333333;}
#footersearch a:active {color: #333333;}
#footersearch a:hover {color: #333333;}
#footersearch a {text-decoration: none; color: #333333;}

The following is the code for the template html file before Typo3 gets it.

Home Page:





Suppliers and Photos
var restoreOnce = 0;function saveposition(panel){var admPanelPosX = panel.offsetLeft;var admPanelPosY = panel.offsetTop;setCookie("admPanelPosX", admPanelPosX);setCookie("admPanelPosY", admPanelPosY);}function restorePosition(){if(restoreOnce == 0){var admPanelPosX = getCookie("admPanelPosX");if(admPanelPosX > 0){document.getElementById("admPanel").style.left = admPanelPosX + "px";}var admPanelPosY = getCookie("admPanelPosY");if(admPanelPosY > 0){document.getElementById("admPanel").style.top = admPanelPosY + "px";}restoreOnce = 1;}}function setCookie(name, value, expires, path, domain, secure) {document.cookie= name + "=" + escape(value) +((expires) ? "; expires=" + expires.toGMTString() : "") +((path) ? "; path=" + path : "") +((domain) ? "; domain=" + domain : "") +((secure) ? "; secure" : "");}function getCookie(name) {var dc = document.cookie;var prefix = name + "=";var begin = dc.indexOf("; " + prefix);if (begin == -1){begin = dc.indexOf(prefix);if (begin != 0) return null;}else{begin += 2;}var end = document.cookie.indexOf(";", begin);if (end == -1){end = dc.length;}return unescape(dc.substring(begin + prefix.length, end));};var dragobjekt = null;var dragx = 0;var dragy = 0;var posx = 0;var posy = 0;function draginit() {document.onmousemove = drag;document.onmouseup = dragstop;};function dragstart(element) {dragobjekt = element;dragx = posx - dragobjekt.offsetLeft;dragy = posy - dragobjekt.offsetTop;};function dragstop(){dragobjekt=null;};function drag(ereignis){posx = document.all ? window.event.clientX : ereignis.pageX;posy = document.all ? window.event.clientY : ereignis.pageY;if(dragobjekt != null){dragobjekt.style.left = (posx - dragx) + "px";dragobjekt.style.top = (posy - dragy) + "px";}}
draginit();restorePosition();

Sub-page:





var restoreOnce = 0;function saveposition(panel){var admPanelPosX = panel.offsetLeft;var admPanelPosY = panel.offsetTop;setCookie("admPanelPosX", admPanelPosX);setCookie("admPanelPosY", admPanelPosY);}function restorePosition(){if(restoreOnce == 0){var admPanelPosX = getCookie("admPanelPosX");if(admPanelPosX > 0){document.getElementById("admPanel").style.left = admPanelPosX + "px";}var admPanelPosY = getCookie("admPanelPosY");if(admPanelPosY > 0){document.getElementById("admPanel").style.top = admPanelPosY + "px";}restoreOnce = 1;}}function setCookie(name, value, expires, path, domain, secure) {document.cookie= name + "=" + escape(value) +((expires) ? "; expires=" + expires.toGMTString() : "") +((path) ? "; path=" + path : "") +((domain) ? "; domain=" + domain : "") +((secure) ? "; secure" : "");}function getCookie(name) {var dc = document.cookie;var prefix = name + "=";var begin = dc.indexOf("; " + prefix);if (begin == -1){begin = dc.indexOf(prefix);if (begin != 0) return null;}else{begin += 2;}var end = document.cookie.indexOf(";", begin);if (end == -1){end = dc.length;}return unescape(dc.substring(begin + prefix.length, end));};var dragobjekt = null;var dragx = 0;var dragy = 0;var posx = 0;var posy = 0;function draginit() {document.onmousemove = drag;document.onmouseup = dragstop;};function dragstart(element) {dragobjekt = element;dragx = posx - dragobjekt.offsetLeft;dragy = posy - dragobjekt.offsetTop;};function dragstop(){dragobjekt=null;};function drag(ereignis){posx = document.all ? window.event.clientX : ereignis.pageX;posy = document.all ? window.event.clientY : ereignis.pageY;if(dragobjekt != null){dragobjekt.style.left = (posx - dragx) + "px";dragobjekt.style.top = (posy - dragy) + "px";}}
draginit();restorePosition();

_uacct = "UA-1342553-1";
urchinTracker();

Thanks for the help! I appreciate it greatly, will be checking to see what wise, sage advice will be given!

wafflestomper
wafflestomper's picture
Offline
Regular
Virginia
Last seen: 10 years 2 weeks ago
Virginia
Timezone: GMT-5
Joined: 2007-02-16
Posts: 16
Points: 4

Just a few things off...

I didn't look through your code, but in FF2 for the Mac, a few things look a little off:

1. The pictures look a little fuzzy (especially the captions).

2. Something's wrong with the search button at the top of the page. You can't see Advanced Search below the search field, and the magnifying glass covers up what you are typing.

Here is a pic of what I saw:

http://zollinhofer.com/random/screenshot.png

http://www.zollinhofer.com
------------------------------
"It is better to keep your mouth closed and let people think you are a fool, than to open it and remove all doubt." - Mark Twain

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

Thanks...

Thanks for the reply!

I don't have access to a Mac...so I appreciate you looking at it!

The pictures I did intentionally blur...didn't want huge attention drawn to the actual photo, was sort of trying for a "snapshot" feel...may have overdone it a bit.

The search section...hmmm...going to have to see what I can do with that one...it looks fine in IE6/7 & FF2 on Windows, any suggestions? I will see what I can do from here.

Thanks again!

PS - can you tell me if the search box at the bottom of the screen does the same thing? Or is it only the top?

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

Fixed?

I checked it with a browsercam trial...it seems to be fixed...I just needed to set the width for the search box (the default size is different for Macs I guess)

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

A couple of things to look

A couple of things to look out for when the text size is increased:


  1. The search box in the header spills out the right side

  2. The headings on the internal pages overlap the coloured area below rather than pushing it down


Also, you seem to have a case of divitis. In particular, you have no heading tags on your page and you're not using unordered lists for your navigation.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

Thanks!

Tyssen thanks for taking a look!

On 1: I'm aware of that one and not quite sure how to fix it? I could expand the width of the bar to 100%/auto instead of a set width however I really don't care for the rest of the site to be excessively wide (especially the orange area), and am not sure if it looks good to just have the top bar expanded across the screen with the rest a set height. Is there a way to set the width of an area dynamically depending on the text size?

On 2: I just noticed that before you mentioned it, thanks! Those are dynamically generated by the CMS I will take a look at tweaking that.

On "divitis" I read the post that you linked to several times before posting this one, suggestions on how to kill divs? Remember that Typo3 references a tag to put something in. What I mean is that the "navigation" divs are populated dynamically by the menu, the "search divs" are dynamically filled with the search form, I don't mind replacing them with another tag, but what would I use instead? (I've seen mention of a "fieldset" tag would that work to replace the "search divs"?)

In relation to the navigation, I've considered changing over to an unordered list for the navigation, currently the nav is dynamically generated images created by Typo3. I may change over, hadn't decided...liked the look of the images...however it would cut down on the size of the page/load time significantly

I just read several posts on this site about turning the h1 tag into an image...I could replace the logo div with an h1 tag (or is there something better to use?)

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

jamesdasher wrote:On 1: I'm

jamesdasher wrote:
On 1: I'm aware of that one and not quite sure how to fix it?

I'm talking about the whole header, just the search box and giving the input a width (and probably height) in pixels should solve the problem I mentioned.

jamesdasher wrote:
I don't mind replacing them with another tag, but what would I use instead?

You don't need to replace them with anything, in fact, you don't need them at all. You can attach IDs directly to your forms and style those, you don't need an additional wrapper div.

jamesdasher wrote:
In relation to the navigation, I've considered changing over to an unordered list for the navigation, currently the nav is dynamically generated images created by Typo3. I may change over, hadn't decided...liked the look of the images...however it would cut down on the size of the page/load time significantly)

You can still use images for your nav (you don't have to go for image replacement), but each image should be wrapped in a <li>.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

Thanks for working with me...

Hey Tyssen,

Thanks for helping! Here is my problem The div for the form is not there just for styling, the main purpose for that is the CMS (Typo3) takes and populates the defined area with the form or other content. It is currently using the

information to place the form; so I can replace it with another tag, but I need something to break the area down for the CMS.

so what would be the proper formation for the <li> with images, I ask because I can't just code it, I have to script it into my menu creation script (Typo3 is dynamically creating each image from database information, the title of the page, etc.)

I have given the search box a width...and it changes depending on the text size? which I believe is what you are talking about?

Thanks for the help!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your nav should look like

Your nav should look like this:

  • Products
  • About Us
  • Contact Us
  • Support
  • FAQ
  • Links
(you should also remove border=0 as that can be controlled via the CSS). I'm sorry I don't know anything about Typo3 so can't advise as to how you get around the issue of it having to include divs for everything. Doesn't sound like a very flexible solution if that's the case.

As for the input in your header, have you updated the CSS online because your link still shows it as having no width?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

I've updated the width and

I've updated the width and height of the search input, it doesn't break it anymore...I had it as a 10em width changed it to a px width and we should be good there.

In relation to the Typo3...I don't think I'm describing it very well, let me try again. If you reference my template html at my top post let's take the search area for example, you see I currently have a div with the id of "footersearch"

What happens is that I upload the template file into my site, then use Typo3 to map the areas or elements that I want dynamic content in:

List of "Mapped Elements"

I could map an element area to anything basically that could "contain" code or an element, or whatever I put in it (I've used divs so far, could change to anything)

Mapping an "Element"

I basically select what I want to map

Element Code

Here is the code generated for the mapped area, the circled function is a call to a dynamic element I have created which is the search form.

Dynamic Content Code

This is the code for the actual search form that is titled lib.searchbox this is included in the area.

So essentially I could map with anything, etc. but it basically tells Typo3 where the dynamic content is. The form is currently a dynamic content to enable it to pull the data for the search plugin.

So I could erase divs, but then I would have to map something else to plug my element into...it could basically be any containing tag. As an example, I should be able to replace the div that contains my nav bar currently with a UL tag so it is contained within a UL.

Hope that makes sense.

I will work on changing my navigation.

Thanks for the help!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I only half get what you

I only half get what you have to go through to make Typo work but the crux of the matter is whether you can actually assign IDs to the form elements themselves because if you can, then you just do away with the extra containing div and map it to the next nearest parent (e.g. #footer instead of #footersearch). If you can't assign IDs to forms, then I guess you have to go with what you've got.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

Hey, if you only half get

Hey, if you only half get it...you're doing well. Smile It's a powerful program...but it has a pretty intense learning curve. Spent a lot of time with it, and I still only half get it all. Wink Yes I can assign IDs to the form, no problem, and I'm seeing what you are saying now...I will see what I can do about removing my encasing "form" div. Smile

In relation to the UL for the nav. I've switched the navigation into a UL as you suggested, I'm a little unsure how to style it to go horizontal instead of vertically, I'm looking at "A List Apart" tutorial, and still not sure, help on the CSS to achieve the horizontal look would be appreciated! I will keep looking and trying to figure it out in the meantime.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You just need to float the

You just need to float the list items left and then make sure that whatever content follows is cleared properly.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

The Floated UL Nav

Hey All, I'm working on lessening my divs, right now I'm working on the navigation converting as Tyssen showed. I have it all in a UL list with the < li > floated left. So they line up right, now my problem is that they aren't aligning like I would assume they should.

That's what it looks like in FF2 with no positioning set. How do I move the menus back to where they should be? I tried padding/margins' but IE7 and FF2 were completely different in where they landed?

Here is my updated CSS file:

/* Orange CSS */

BODY {
margin: 0px;
}
#overview {
height: 100%;
margin: 0px;
}
a img {
border: none;
}

#logo {
margin: 0px;
clear: left;
width: 160px;
}

/* Header area */
#header {
width: 780px;
height: 110px;
background-repeat:repeat-x;
background-image:url(../images/header_back.jpg);
position:relative;
}

#topnav li {
float: left;
list-style-type: none;
}

#topsearch {
clear: left;
position:absolute; top: 14px; left: 610px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#topsearch .text {
border: 1px solid #FFFFFF;
background-color: #FFCC66;
width: 125px;
height: 15px;
}
#topsearch .go-button {position:absolute; top: 3px; left: 133px;}
#topsearch a:link {color: #FFFFFF;}
#topsearch a:visited {color: #FFFFFF;}
#topsearch a:active {color: #FFFFFF;}
#topsearch a:hover {color: #FFFFFF;}
#topsearch a {text-decoration: none; color: #FFFFFF;}

/* Upper white area */
#upperwhite {
height: 127px;
width: 780px;
background-image:url(../images/upperwhiteline.jpg);
background-repeat: repeat-x;
position:relative;
float: left;
}

/* Content area */
#content {
width: 765px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding-right: 15px;
padding-bottom: 2px;
background-color:#FFCC66;
position:relative;
clear: left;
}

*html #content{
margin-top:-4px;/*for ie6*/
}

/* Food bar area */
#foodbar {
width: 780px;
height: 111px;
background-image:url(../images/foodbanner.jpg);
background-repeat:repeat-x;
position:relative;
float: left;
}
#footer {
width: 780px;
position:relative; top: 3px;
float: left;
}

#footernav li {
float: left;
list-style-type: none;
}

#footersearch {
position:absolute; top: 1px; left: 440px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#footerinfo {
position:absolute; top: 45px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
#footersearch .text {
border: 1px solid #333333;
background-color: #FFCC66;
width: 125px;
height: 15px;
}
#footersearch .go-button {position:absolute; top: 3px; left: 133px;}
#footersearch a:link {color: #333333;}
#footersearch a:visited {color: #333333;}
#footersearch a:active {color: #333333;}
#footersearch a:hover {color: #333333;}
#footersearch a {text-decoration: none; color: #333333;}

and updated html template file





Suppliers and Photos

_uacct = "UA-1342553-1";
urchinTracker();

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

FF and others use margins

FF and others use margins for placing lists whereas IE uses padding. So you need to set them both to 0 for the <ul> (and probably the list items too) and then reapply margins to get it where you want.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

Next problem?

Alright, I have replaced many of the divs in my design...logo is contained by an h1 tag, nav is a unordered list, the search form is no longer contained in a separate div. I've cut down the div amount a lot (I know there is one extra in the footer, a limitation with how I am including the copyright info and such). I have succeeded in converting the site over to a strict DOCTYPE with no errors (was on transitional).

Here is my problem though: whenever I start increasing the text size elements in the header/footer of the site start getting moved around A LOT! The menu, logo, etc. starts dropping, it wasn't doing this before so it seems like it has something to do with starting to use UL/h1 tags and such, any help on how to make the header) stay still (there isn't any text in the header at all).

UPDATE: It looks like the problem only occurs in FF not IE7 (the 2 I have installed will check others later) I'm assuming this is because IE on PC can't resize pixel sized fonts which I set in the header, however FF doesn't have this limitation.

DIFFERENT PROBLEM: Checked the site via browsercam to see what it looked like in some mac browsers. Two different problems that have become apparent:

Opera Browsers (true on my PC as well) the search boxes are off (they hover over the navigation menus?)...this is also true on several Mozilla browsers that I checked in browsercam

Mozilla Browsers (and a few others) there is white space above the header...it doesn't go flush.

Any suggestions would be hugely appreciated! I'm trying to get this!

Here is my updated CSS for my homepage:

/* Orange CSS */

BODY {margin: 0px;}

#overview {height: 100%;}

a img {border: none;}

/* Header area */
#header {
width: 780px;
height: 110px;
background-repeat:repeat-x;
background-image:url(../images/header_back.jpg);
position:relative;
float: left;
}

#logo {
float: left;
margin: 0px;
width: 160px;
height: 110px;
}

#topnav {
margin: 0px;
padding: 0px;
position:relative; top: 14px;
}

#topnav li {
margin: 0px;
padding: 0px;
float: left;
list-style-type: none;
}

#header .search {
border: 0px;
position:relative; top: 12px; left: 6px;
margin: 0px;
padding: 0px;
}

#header .text {
border: 1px solid #FFFFFF;
background-color: #FFCC66;
width: 125px;
height: 15px;
}

#header .go-button {position:relative; top: 3px; left: 5px;}

/* Upper white area */
#upperwhite {
height: 127px;
width: 780px;
background-image:url(../images/upperwhiteline.jpg);
background-repeat: repeat-x;
position:relative;
float: left;
}

/* Content area */
#content {
width: 765px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding-right: 15px;
padding-bottom: 2px;
background-color:#FFCC66;
position:relative;
clear: left;
}

*html #content{
margin-top:-4px;/*for ie6*/
}

/* Food bar area */
#foodbar {
width: 780px;
height: 111px;
background-image:url(../images/foodbanner.jpg);
background-repeat:repeat-x;
position:relative;
float: left;
}

/* Footer area */
#footer {
width: 780px;
position:relative; top: 3px;
float: left;
}

#footernav {
margin: 0px;
padding: 0px;
position:relative; top: 2px;
}

#footernav li {
margin: 0px;
padding: 0px;
float: left;
list-style-type: none;
}

#footer .search {
border: 0px;
position:relative; top: 0px; left: 6px;
margin: 0px;
padding: 0px;
}

#footer .text {
border: 1px solid #333333;
background-color: #FFCC66;
width: 125px;
height: 15px;
}

#footer .go-button {position:relative; top: 3px; left: 5px;}

#footerinfo {
position:relative; top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
float: left;
}

and updated html template file





Suppliers and Photos

_uacct = "UA-1342553-1";
urchinTracker();

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

jamesdasher wrote:Here is my

jamesdasher wrote:
Here is my problem though: whenever I start increasing the text size elements in the header/footer of the site start getting moved around A LOT!

I'm not seeing that. The only content that's moving is in the yellow bit in the middle.

For your search form problem, don't use position: relative, top, left etc. Instead add the values you've given to top and left to the margins instead.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

Thanks for replying Didn't

Thanks for replying

Didn't have time before I left work to update and say I fixed it Smile I set font-size to 0px; in the header area and it now doesn't resize. Works, as there is no text in the header Wink

jamesdasher
Offline
Regular
Pueblo, CO
Last seen: 12 years 16 weeks ago
Pueblo, CO
Timezone: GMT-7
Joined: 2007-02-09
Posts: 23
Points: 0

Much Better! And a couple more questions

Well it is definitely looking better, I have successfully made it look okay in FF2; IE - 5, 5.5, 6, & 7; Opera 9. And according to BrowserCam it looks alright in most other browsers as well.

Here is a link to the BrowserCam SS: http://www.browsercam.com/public.aspx?proj_id=325980

Three questions:

1 - Should I even try to fix the site on IE 5.2 for the Mac, That is the one that it is butchered in right now! I wouldn't even know where to start on that one. I'm assuming that several of our clients are on Mac's how many Mac users use IE 5.2? Right now it's horrendous, if I should try fixing it, any suggestions are appreciated as I know nothing about that browser.

2 - On Mozilla/Netscape browsers they are all adding in "white space" above the header area, is there something I can do to fix this, or is it worth the hassle?

3 - Opera 8.x doesn't seem to like no-margins around a site (see the Opera 8 SS at BrowserCam) again is this to much hassle to fix or is there an easy fix for it?

Thanks for the help so far I HUGELY appreciate it!

James

PS - Here again is my updated code...

/* Orange CSS */

BODY {margin: 0px;}

#overview {height: 100%;}

a img {border: none;}

img {
border: none;
margin: 0px;
padding: 0px;
}

/* Header area */
#header {
width: 780px;
height: 110px;
background-repeat:repeat-x;
background-image:url(../images/header_back.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0px;
position:relative;
margin: 0px;
padding: 0px;
float: left;
}

#logo {
float: left;
margin: 0px;
width: 160px;
height: 110px;
}

#topnav {
margin: 0px;
padding-top: 14px;
position:relative;
}

#topnav li {
margin: 0px;
padding: 0px;
float: left;
list-style-type: none;
}

#header .search {
position:absolute; top: 13px; left: 610px;
border: 0px;
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0px;
float: left;
}

#header .text {
border: 1px solid #FFFFFF;
background-color: #FFCC66;
width: 125px;
height: 15px;
}

#header .go-button {
position:absolute; top: 3px; left: 135px;
margin: 0px;
padding: 0px;
width: 16px;
height: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0px;
}

/* Upper white area */
#upperwhite {
height: 127px;
background-image:url(../images/upperwhiteline.jpg);
background-repeat: repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0px;
float: left;
margin: 0px;
padding: 0px;
}

* html #upperwhite {
margin-top:-25px;/*for ie5.x and 6.x win */
}

/* Content area */
#content {
width: 765px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
padding-right: 15px;
padding-bottom: 2px;
background-color:#FFCC66;
position:relative;
clear: left;
}

* html #content {
width:780px;/*for ie5.x win */
w\idth:765px;/*for ie6*/
}

/* Food bar area */
#foodbar {
width: 780px;
height: 111px;
background-image:url(../images/foodbanner.jpg);
background-repeat:repeat-x;
position:relative;
float: left;
}

/* Footer area */
#footer {
width: 780px;
position:relative; top: 3px;
float: left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0px;
}

#footernav {
margin: 0px;
padding: 0px;
position:relative; top: 2px;
}

#footernav li {
margin: 0px;
padding: 0px;
float: left;
list-style-type: none;
}

#footer .search {
border: 0px;
position:absolute; top: 0px; left: 450px;
margin: 0px;
padding: 0px;
float: left;
}

#footer .text {
border: 1px solid #333333;
background-color: #FFCC66;
width: 125px;
height: 15px;
}

#footer .go-button {
position:absolute; top: 3px; left: 135px;
margin: 0px;
padding: 0px;
width: 16px;
height: 16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0px;
}

#footerinfo {
position:relative;
padding-left: 15px;
padding-bottom: 5px;
padding-right: 15px;
padding-top: 5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
clear: left;
}





Suppliers and Photos

_uacct = "UA-1342553-1";
urchinTracker();

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

For IE5 Mac you can give it

For IE5 Mac you can give it its own stylesheet by doing this:

@import "mainstylesheet.css";
/*\*//*/
@import "IE5mac.css";
/**/

I'd look at changing your rules in * html first and then look at anything that is floated next. I'll leave it up to you to decide whether it's worth your time or not.

For the other two problems, I'd try zeroing all your margins with:

* { margin: 0; padding: 0 }

and see if that makes a difference. If not, for Mozilla/Netscape it could be a case of collapsing margins and adding a tiny bit of padding to one of the elements should fix it (although if it was collapsing margins I'd expect to see it in FF too).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference