VHL's CSS / HTML Help Thread!

[DesignVHL]

Since I keep needing some css help and I'm tired of making new threads for every issue, I thought I'd take MDS idea and just put it all in one place. Thanks everyone for your help in the past, present, and future. I'm gettin' there! :)

Having problems with IE6 (looks fine in ff) - these two pages are shifting slightly to the left...can't seem to 'see' whats going on in my css code. tho I am sure it has something to do with padding or margins possibly? Everything validates though.

http://www.sheerwire.com/swV2_TESTING/subpage_template.html
http://www.sheerwire.com/swV2_TESTING/products.html

Any ideas I'm sure its something I should know and will kick myself later.

[Rocketpig]

I don't have time to read through this article, but at a glance it appears to talk in length about IE6 and its piece of **** functionality when it comes to padding and margins.

http://webdesign.about.com/od/css/a/aaboxmodelhack.htm

I've found that if the site is uncooperative, it works best to just create a special CSS file for IE6. Others might have better suggestions, though.

I cannot wait until IE6 is just a bad memory of years past. What a pile of junk.

[ericamhc]

Guessing IE is not accepting margin: auto? http://www.quirksmode.org/css/quirksmode.html margin and width auto are a bit down the page, but looks like IE6 and 7 are "depends" for whether they work.

(edited because I realized I said something stupid almost as soon as I hit "post")

[ericamhc]

Also not sure why, but the site above lists it as margin: 0 auto, rather than just auto?

[DesignVHL]

Booyah! I figured it out! I feel stupid now. First off, I already fixed the IE padding - margin issue - learned my lesson to Not use margin values but padding. :) Well in case anyone cares (who knows maybe it will help someone else) This is what needed to be fixed:


#content_1col {
text-align:left;
width: 784px;
\width: 784px;
w\idth: 708px;
margin: 0px auto;
padding: 20px 38px 20px 38px;
}
I forgot to change the w\idth with to compensate for the change in padding - 38px left and right padding! I simply just needed to subtract 76px from the total 784 content wrapper width! Yay me!

Anyways thanks again...

[MikeTheVike]

Booyah! I figured it out! I feel stupid now. First off, I already fixed the IE padding - margin issue - learned my lesson to Not use margin values but padding. :) Well in case anyone cares (who knows maybe it will help someone else) This is what needed to be fixed:


#content_1col {
text-align:left;
width: 784px;
\width: 784px;
w\idth: 708px;
margin: 0px auto;
padding: 20px 38px 20px 38px;
}
I forgot to change the w\idth with to compensate for the change in padding - 38px left and right padding! I simply just needed to subtract 76px from the total 784 content wrapper width! Yay me!

Anyways thanks again...

is that a hack? I've had the same problem in the past that you are having, and I always managed to solve it messing around with the margins, padding, floats, and sometimes adding display: inline; to divs floated inside other divs.

[DesignVHL]

yes it is an IE6 hack. the first width defines what you really want the width to be. THEN if you have any padding (i would avoid using margins as i've recently learned), you subtract the total left and right padding as seen in w\idth: 708; Cannot remember why I need the \width, but i read it somewhere. If you google IE6 w\idth hack - some great info should come up to explain in better than I can.

[ericamhc]

Incidentally it had the same issue in IE8 beta - I had been so hopeful that 8 would address such issues.

I don't know how many times I've read about a neat technique in advanced CSS followed by "but this doesn't work in IE".

[DesignVHL]

ok two issues - stupid probably but can't figure this out and is driving me crazy.

First, I'm having trouble getting consistancy on the vert. location of the content - the content isn't consistantly in the same place vertically - assuming it is a padding or margin thing..but cannot seem to see whats going on. The strange thing is I created a template for these 1 col. content pages - so I thought they would all start at the same vertical location - and that doesn't seem to be the case...any thoughts on this are greatly appreciated!

http://www.sheerwire.com/swV2_TESTING/new_products.html (has image links - but in divs, and not in UL) Perhaps this page should be done as a UL instead? Would that make it more consistant?

http://www.sheerwire.com/swV2_TESTING/products.html (has UL image links)

http://www.sheerwire.com/swV2_TESTING/corporate.html (text content)


second issue is that my new_products (first link) isn't validating, but may be related to first issue. There are some errors in there and I'm not sure how to fix em.

thanks!

[DesignVHL]

dang, too late to edit...well i figured out why the images weren't lining up, but the pages with text seem to be a few pixels lower than the top of the image links. :P back to more playin' around!

[Red Kittie Kat]

Ok .. this should be renamed ... VHL's Talk To Herself Thread


:D

[DesignVHL]

i know, really! I'm just so lonely today I guess. :(

[Mynock]

I had one too. Don't feel bad. http://www.graphicdesignforum.com/forum/showthread.php?t=12398

[shalom_m]

RKK don't knock the idea.
VHL is using the forum as a soundingboard. Far better than using a partner who may get bored or talking to the monitor!

I find that when I manage verbalize a problem; I have 90% of the solution.

VHL - I had another look at your HTML and CSS. It is getting quite heavy.
You redefine width: 784px; a number of times instead of having one "pagewidth" that will hold true in the whole page.

Have a look at how I used #pagewidth and <div id="pagewidth"> here (http://www.verulamians.co.uk/) to create a container for the whole page, or how I used #wrapper and <div id="wrapper"> to do the same here (http://www.comp-4u.com/).

[tZ]

I constantly talk to myself on this board. Look at all the past problems I've solved using this method, lol

[Red Kittie Kat]

RKK don't knock the idea.

I wasn't .... just making an observation :D

[pixelbliss]

Sorry I am a dip, and I read your last post V and not sure which page or which text you don't have lining up? I assumed it was the new products page but then realized you've got padding-top: 20px on text_box_right so I must be wrong. Here I was fiddling, trying to get it working, when I realized it's just that padding-top that prevents the text at right from matching vertically with the images.

I must warn you, they say kids steal your braincells and I'm pretty sure mine have all my brain today (all your brain are belong to us?)

[DesignVHL]

Ha well I guess its a good thing I don't have kids - yet because I need my brains today!

And thanks shalom again, I got rid of all the page widths except for the two used for my container and wrapper. I have two because my background image is actually 800px wide - but the nav, header and contact area need to be 784px so that that drop shadow works and my elements fit right...I'm sure there's a better way to do this....I'm getting there though!

E - your not a dip, lol...I guess it is the top padding that is not allowing my text on pages like this: http://www.sheerwire.com/swV2_TESTING/corporate.html

I've got it down to 2px lower - can't seem to figure out how to move it up 2px! Still workin' on that one.

*and yes talking things through verbally or - as mentioned yesterday, talking on the board to yourself can actually help work ideas and problems out - and could even possibly help someone else learning css! :)

[pixelbliss]

Absolutely talking it out helps, especially for me since often it's the silliest little detail I'm missing because I've let myself get frustrated (I'm terrible for spending hours trying to fix something when it's just a typo or the closing tag is missing). It's just that a fresh eye can help fix so many problems.

That said, I really am looking, I am just seriously without brain today. Have a few "personal life" things bouncing back and forth in my head. Are you busy again this afternoon?

[DesignVHL]

pixel hit me up anytime! :) Sorry to hear about the personal life - I understand!

I think sometimes people at work think I am crazy because I do talk to myself when working things out. I am stuck in a crappy cube with a crappy chair in the back of the reception area (I get to listen to papers shuffling and phone calls all day) - thank goodness for headphones or I would go CRAZY!

[shalom_m]

Valerie
The CSS is looking much better now - you are getting there!

I've got it down to 2px lower - can't seem to figure out how to move it up 2px! Still workin' on that one. I don't quite understand what you are talking about - please explain.

I have two because my background image is actually 800px wide - but the nav, header and contact area need to be 784px so that that drop shadow works and my elements fit right...I'm sure there's a better way to do this....I'm getting there though! There is!
Consider looking at the dropshadow as an additional element in your container. i.e. #content_bg as a part of #container. Or put in simpler terms, use #container only add the content_bg.gif to it then use padding on both sides. (Have a look of how I used that in the noticeboard of the Rugbyclub (http://www.verulamians.co.uk/))
Noticecontainer {
float: left;
clear: right;
display: inline;
position: relative;
width: 274px;
margin-right: 70px;
margin-left: 69px;
}
Now to the statements about kids!
I have learned to enjoy the advantages they bring. My older ones (25 and 22) actually do help!
My youngest (7) is still innocent enough to tell me what looks nice and what does not!
Believe me when I say:
I have learned more from my children, my pupils and my students than I ever did from my teaches and professors!

[DesignVHL]

Regarding the 2px thing - its not really that big of a deal - but the pages with text - like Order and Corporate both have text - starting with a styled H1 tag - its 2px lower than the image links on the other pages - doesn't line up with the top top of the div. I'm not going to sweat it though, I can play around with that later.

I tried playing around with your background fix - but it threw things off a bit - I'm sure I didn't do it right. I think for this site, I'm going to leave it be so I can move forward - I still have a lot to do. AND, I also have another, much larger site I need to redo with all css and divs for my company. So I'll look to applying this simplified way of dealing with backgrounds and content containers in there. Thanks again for the help this has been a great learning experience!

Re kids - I don't doubt that one bit - kids are wonderful, can't wait to have a few -we're almost there! :)

[tZ]

The below css will remove the outlines your links which I highly recommend removing.

a { outline: none; }

[DesignVHL]

I've thought about that tZ....but have read conflicting resources on useability for disabilities or something. I much prefer to not have the outline, so perhaps I will just go do that! Yep talked me into it!

[tZ]

There may be but most book and resources I have read remove them. If your really concerned you can create two separate style sheets and replace the outlines along with any other styles for disabilities.

[DesignVHL]

meh not too concerned. its for an industrial mfc site..makes sense to me. I removed them and it IS less annoying!

[shalom_m]

H1 tag - its 2px lower than the image links on the other pages

Have you tried -2px in the H1 ?

[DesignVHL]

Having problems with the active link! Just want the nav button to the right to be grey as styled on hover for all product pages .Any idea what I am doing wrong? And yes, I know my css is a total mess! I'll get better! :P thanks for the help!

http://www.sheerwire.com/swV2_TESTING/audio.html

[shalom_m]

I tried it on FF and as you say it does not work. Looking at the code I could not figure out why.

I then tried it on IE6 and if works perfectly. Now that might be a clue.

If you can't find a solution, I will look at it again - after some shut eye.

[DesignVHL]

I am thinking about not using active now, and recoding the whole thing...kinda a mess because i need to move the 3 other buttons down to fit the sublinks underneath it....what a pain! Back to the drawing board -active is pointless i am begining to think!

[DesignVHL]

Can someone please tell me what I am doing wrong here? I cannot seem to get an evenly spaced subnavigation. would like it to have less spacing too. I think the other buttons are interfering somehow? What can I do to make this look right? Thanks for the help!

http://www.sheerwire.com/swV2_TESTING/audio.html

[shalom_m]

Val,

You are right, other buttons are interfering
What I have done to see the problem in a clearer light, I changed the background colors of your submenu.

.products_subnav a:link, .products_subnav a:visited
{
color: #494949;
text-decoration: none;
background-color: #00FFFF;
}

.products_subnav a:hover, .products_subnav a:active
{
color: #CC4E4F;
text-decoration: none;
background-color: #FFFF00;
}
The result looks like this:
http://mandelbaumonline.net/csspop/VHL005.png

See the two arrows pointing at the white areas - they are a product of:

.right_product_nav ul
{
margin: 0px;
padding: 15px 0px 0px 0px;
list-style-type: none;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:80%;
line-height: 130%;
font-weight: bold;
}
As my dear departed mother-in-law used to say:
Once you have aquired some padding, it's had to diet it off again!