10 replies [Last post]
itz
Offline
Regular
arizona
Last seen: 13 years 22 weeks ago
arizona
Joined: 2007-05-28
Posts: 17
Points: 0

Hi!
I am exited I have finally solved most problems I was having with this layout
http://www.luxuryville.org/test/style9/layout9.html

Now, I just can not figure out what's going on with those colored buttons (addme etc) in the boxes. The top margin above each one of those buttons is way too high. How can I adjust that? There is no margin set, and I tried all kinds of things, they just won't move up!
I want them to be pretty much on top of the boxes, not 2em lower.. :shrug:

if anyone has any glue on why that is, please spill it out,.... and in advance,- thank you very much!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:How can I adjust that?

Quote:
How can I adjust that? There is no margin set,and I tried all kinds of things, they just won't move up!

Are you sure? always control your margins.

No margins set? initially that's correct as your using a reset ruleset at the start but what's this a bit later on?

p { font-size: 1.0em; line-height: 1.8em; margin: 1.2em 0em 1.2em 0em; }

Try .csc p {margin-top:0;}

with generic selector styling I would tend to keep it to the top of the stylesheet together with basic typography and general formatting, it just makes it easier to know where one is.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

itz
Offline
Regular
arizona
Last seen: 13 years 22 weeks ago
arizona
Joined: 2007-05-28
Posts: 17
Points: 0

hmm, I figured it has to do

hmm, I figured it has to do with this particular 'p'
I have added those font settings I found in hope for better browser compability. It has given me problems elsewhere too. Maybe I ought to get rid of most of those type settings.
There is also a border suppose to show up on the bottom of the

Main content Box


But it doesn't,... I assume for similar reasons...

I will try what your suggesting tonight
I am not on that machine right now, but thank you very much for this hint!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

There's nothing wrong in

There's nothing wrong in using a zero margin/padding ruleset but you have to remember what rules you may have set afterwards, that ruleset I pointed out is generic it styles all paragraph elements so you have effectivly added back in margins where you were thinking that you had cleared them all.

Maybe you require the paragraph margins on something specific, where a paragraph is in a specific section of the page, in which case it might be better to use descendent selectors e.g #content p {} to set the margins
although I would consider that paragraphs generally need margins/padding so would tend to set a generic rule for paragraphs and would tackle the resulting paragraph margins in the sidebars.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

itz
Offline
Regular
arizona
Last seen: 13 years 22 weeks ago
arizona
Joined: 2007-05-28
Posts: 17
Points: 0

thank you! That fixed it!

thank you! That fixed it!
Now in both of my browsers, firefox & konqueror I see those grey and orange box headers messed up.
It appears that the corners of the grey box are on top of the header line. strange. Should I try setting the z-index on those images?
http://www.luxuryville.org/test/style9/layout9.html

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Z-index? I doubt it , you

Z-index? I doubt it , you seem to have changed things? in which case you need to track through your changes and see what you have missed, logically you had this working and just needed to remove the top margin, so you have missed something in your changes, and it shouldn't be too hard to track down and after all your page is explaining these corner techniques Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

itz
Offline
Regular
arizona
Last seen: 13 years 22 weeks ago
arizona
Joined: 2007-05-28
Posts: 17
Points: 0

dish this box?

Hugo! thanks for you input, much appreciated!
yeah, I did mess with the settings of the ---p--- within 'csc' tag. I have looked at all my backups that seem to have the same problem, but for some reason the last one didn't do it, but I only fiddled with the ---p--
Anyhow, as long as I push it down far enough, it doesn't happen, but then there are other problems
:?
Here are samples with notes along the right column.
http://www.luxuryville.org/test/style9/layout9.html

If you have a glue why that is, by glancing at it, let me now, otherwise
I can also just get rid of this box, and find me another one. I just used this one cause it was fairly simple and worked in all browsers, can you recommend one? I saw 'clevertrevor' mention somewhere about the newest set of round-box techniques, but now I can't find it...
thank you!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's a bit difficult to

It's a bit difficult to follow all this but working on the first rounded button removing the margin-top does cause a positional problem with the right top corner, but this seems to be cured? (in FF) by giving the 'p' a positional context:

.csc p {position:relative;margin-top:0;}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

itz
Offline
Regular
arizona
Last seen: 13 years 22 weeks ago
arizona
Joined: 2007-05-28
Posts: 17
Points: 0

wicked!

you made my day!
... that did it! thank sooo much! Now I can finally fill this template with the website Wink
I have been pulling my hair on this for over a month, finally, the end is in sight...
again, thanks a killion!!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

no problem

Smile no problem

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

itz
Offline
Regular
arizona
Last seen: 13 years 22 weeks ago
arizona
Joined: 2007-05-28
Posts: 17
Points: 0

uhhuu, embarrassing!

..back here I am.. all too soon..
When looking at this layout on some windows pc in IE 6 : :jawdrop:

http://www.luxuryville.org/test/style9/Poo1_IE.png
http://www.luxuryville.org/test/style9/Poo2_IE.png
http://www.luxuryville.org/test/style9/Poo3_IE.png

The right bar gets pushed below the main content, the buttons are messed up, the footer image and text are very small. That is perhaps cuz the font is set to sub1 em. I was reading somewhere that that can cause problems. Now, can I fix all this by specifying certain rules for IE only?

besides this, I have one more question I think I am going to keep just the box that is using no images (snazzy),cause the other ones are giving me problems, and I no longer want to spend time on them.
What is the most efficient way to code this? basically they are all the same, but some of them will have a grey outline, some a red outline, and some will have a filler color. Do I really need to set each one up separately?
or can I just define the parts that are changing?

thanks again