WordPress.org

1. simplymother
   Member
   Posted 2 years ago #

   http://carolynchappellhome.com (test site)

   I'm really stuck on getting the topmenu list to align with those circles. See how the first two (about & archives) are too much to the left while the second two (books and links) are a bit too far to the right? If I fix one side, the other side gets worse.

   What's the best way to fix this? I could maybe make 2 separate ul's with different classes, right? One for each side? I would go ahead and try that except, oh man, then I looked at what's going on in IE. The words are lined up completely differently! I'm afraid the way I'm doing this, my list is going to be all over the place, depending on what browser people are using!

   Is there a better way to line these up?

2. simplymother
   Member
   Posted 2 years ago #

   So . . . no response means:

   1. The solution is really, really complicated involving reworking your entire site and you should give up now or pay somebody who knows what she's doing to fix this for you.
   2. This is easy-peasy you silly goose, why are you cluttering up our forums with such ridiculous questions.

   Please help? If there's some good reading material/tutorial you can direct me to, that would be great too. As long as it's something specific, not like "Go read everything at w3schools and get back to us." ;)

   Thank you!

3. jgurak
   Member
   Posted 2 years ago #

   just fix the background position of your image (topnavhighlight.png) in your stylesheet.. you are giving it xy (15px 0 ) .. the tricks is in it .. you dont have to re-work anything

4. simplymother
   Member
   Posted 2 years ago #

   That didn't fix it--it helped though, thanks for pointing that out. That's just for the hover image. I need to get those words aligned in the regular background image--and all those circles are in the same image. Should I change that?

   I think my problem has to do with how the words are all different lengths, and with padding around each li, some are pushed further away from each other than others. I could maybe just pad the other words with extra spaces, so they're all the same length, but I don't think that's technically the correct way to do it, and I might be able to get it to look good on my browser, but it will still be all over the place in others. Like look what it's doing in IE. How can I get everything to line up the same in all browsers?

5. Mark / t31os
   Moderator
   Posted 2 years ago #

   You'll still need to tweak this but start with this and it should get you going...

   .topmenu ul {
     margin:35px 12px 0 0;
     padding:0;
     float:right;
   }
   .topmenu li {
     list-style:inside none;
     text-align:center;
     margin:0;
     padding:0;
     width:118px;
     display:inline;
     float:right;
   }
   .topmenu li a {
     padding:0;
     margin:0;
   }

   Should be pretty close to what you want, but as said, just needs a little tweaking... :)

   Yes i know you lose the hover effect without the link padding, but start with the above, and add bits back as you go, you at least get the positioning you want then (or close to it)... ;)

   Since the images are to the right it made sense to float the UL to the right, apply some margin then set the LI element widths, then setting the text alignment to center....

   I over-rode the CSS to test, but you should be able to take the above and add/modify as required..

   Hope that helps...

6. simplymother
   Member
   Posted 2 years ago #

   Thank you so much! That gets them perfectly centered!

   Except, in IE they are too far over to the right. If I move them it will mess them up in Firefox. I'm having that problem in a few places. Everything looks great in Firefox, but in IE there's too little space above the header, there's space below the footer when there shouldn't be, and there's a tiny space on the right side of everything. I have no idea what's causing any of that, so I don't even know where to begin fixing it! Any ideas?

   I've never seen that line-style "inside none" before. What is that doing exactly?

   One last thing: when I hover over "archives" the word moves to the right? Not horrible, but why?

7. Mark / t31os
   Moderator
   Posted 2 years ago #

   list-style:inside none isn't actually required... just habit.. :)

   inside sets where the bullets for the given list are placed... So in this case, this says place the bullets inside the element, default behaviour is for bullets to be sat outside the element...

   none sets the list type, default would be disc, and other possible values are square , circle , decimal and more...

   It doesn't really matter though, because you won't see any bullets on lists that have their display:VALUE changed...

   list-style is shorthand for the following two css definitions..
   list-style-position - Where to place bullets, inside or outside the element.
   list-style-type - The type of bullets to use.

   IE usually assumes default margins and paddings for elements.. so just try and be explicit with your CSS, if an element should'nt have padding, then add padding:0 to the element, likewise for margins..

   Trial and error, just work at it and you'll get there... IE is a pain i know...

8. simplymother
   Member
   Posted 2 years ago #

   Thank you, so helpful.

   I've gone through my stylesheet and added 0 margin and padding to anything that wasn't already styled. Still no changes on IE.

9. Mark / t31os
   Moderator
   Posted 2 years ago #

   Perhaps add some IE specific CSS definitions in...

   You might have to apply different margin/padding for certain versions of IE... or apply a differnet method to get the result... since different versions interpret code differently...*sigh*

   example:
   

   <!--[if IE 6]>
   Your CSS
   <![endif]-->

   More info:
   http://www.quirksmode.org/css/condcom.html
   http://www.quirksmode.org/css/quirksmode.html

10. simplymother
    Member
    Posted 2 years ago #

    I haven't been able to work on this for a while. Ugh, really? I have to make specific code for the different browsers? Is that the best/only way to do this? It just seems like something in my code would have to be off to have it so wonky in IE. But maybe IE really is that bad? Now I'm working on the comment section and that's way off in IE too.

    I've read through one of those links and am I reading correctly, I have to put that alternate code in the html/php files, not in the stylesheet?

11. simplymother
    Member
    Posted 2 years ago #

    I think there must be something wrong. I've checked and other browsers are putting a little space on the right too, not just IE. You can see it just on the side of the header and footer. Even in Firefox, when I change the width of my browser, it puts that space there. Actually, it's not so much a space as the whole thing is just shifting over to the left. Can anyone see what's causing that?

12. Mark / t31os
    Moderator
    Posted 2 years ago #

    This is the best i could do to make it operate correctly in firefox, i have no idea how these changes will effect IE..

    body {
      width:900px;
      margin:0 auto;
    }
    #header {width:100%;border:1px solid #3f3f3f}
    #wrapper {width:100%;margin:0 auto;background-color:transparent}
    #footer {width:899px}

    Anything above is an "additional to" or "replacement of" the definitions that exist in your stylesheet..

    I'm not sure why you get the strange line on the header or the slight displacement on the footer, but i'd just put that down to the way your template is coded and browser quirks...

    The displacement right at the top was related to background color on the wrapper.. setting to transparent looked to resolve that.. Your body central background is already white, so you'd don't really need to be giving elements a white background if they sit inside that central area...

    I'd suggest however you should at least try placing the closing tag for the wrapper after the footer, if you place the footer inside the wrapper this may help, it currently sits outside the wrapper, directly after it...

    As said the above may be worse in other browers, and i can only "test" using firefox since that's where all my debugging/scripting/css tools are..

13. simplymother
    Member
    Posted 2 years ago #

    Thanks!

    It fixed my header completely, in both Firefox and IE.

    So why 899px for the footer? That left a space on the right side, even in Firefox. I set it to 100%, like you did the header, and it's perfect in Firefox. Still weird in IE though. Wonder why it works for the header but not the footer in IE? Guess I'll try one of those IE specific codes.

    So do you think my whole layout is just not done right? I mean, I was just making it up as I went along, looking at some other themes that had similar layouts for ideas.

    I have a body and a wrapper, right? I thought the body was EVERYTHING, including the purple background which is all set outside the 900px, and the wrapper was everything inside the 900px. But now you had me set the body to a width of 900px... how is that working? Now what is setting the purple background color? And with it like this, is there even a need for the wrapper at all? Could I just take it out of all my templates and have the syndicate, header, container, columns, and footer all just inside the body, not the wrapper?

    If there's a better/simpler way to do this, I want to learn it. I'm not afraid to take it all apart, I just don't know where to begin--or where I'd be going, for that matter!

14. Mark / t31os
    Moderator
    Posted 2 years ago #

    If it's not broken, don't fix it...

    Wrappers are usually a good idea, so just leave it be, it's such a small amount of code to, i'm sure it won't hurt to have it there..

    Play around with some HTML files and fire them up in the different browsers, play with the CSS, and you'll soon get an idea of how things will and won't work...

    Whenever i use to write templates i'd always get the main layout done, then test across browsers (use some random text to pad areas as test content), then add the rest.. nothing worse then spending hours on something that won't work due to browser related problems....

    I'm not sure about your problems specifically, i can only do so much without direct access to the code (i'm not asking for it). It does seems strange that you get these weird 1 pixel lines.. I even copied your background image into an editor to check the measurements were right (they were).

    Setting the body is just a quick and easy way to do it... I'm not sure how "Browser safe" that is...

    What i tend to do now though, if i should ever decide to have a dig at a template, is find a nice browser compliant theme, even if i hate the look, then strip out what i don't need, and use the code as a base. It saves a hell of alot of time and hair pulling....

    Why spend hours working out the quirks when you can just use a code base that has the ground work already done... :)

15. simplymother
    Member
    Posted 2 years ago #

    Well, that's basically what I did, or started to do, but I think I stripped it a little too far! I am spending way too much time on this. That footer issue is all that's really bothering me now though. It's so weird, and it's not just IE, I just checked browsershots and Firefox is the only one that's NOT doing it. It just shifts over a bit to the left. I should just let it be . . . BUT I CAN'T! ;) Thank you for all your help though!

Topic Closed

This topic has been closed to new replies.