WordPress.org

Ready to get started?Download WordPress

Forums

CSS layout in Safari (27 posts)

  1. rsbenedict
    Member
    Posted 9 years ago #

    Hey, guys!
    I'm new to WordPress and new to CSS. I usually make my sites via Flash and don't have these layout problems because of it. My current CSS layout works fine in windows IE/Mozilla/Opera/Firefox. It also works fine in Mac IE/Mozilla/Opera/Firefox, but not in Safari. The headers are off, the colors are off, and the layout is all screwed up. I don't know why it's so screwed up in Safari. My CSS is all hacked as I've experimented adapting the CSS to a layout that I like. It's not as neat and organized as I would have done if I had built it by hand. But I don't know enough about CSS to redo it all by hand.
    Anyway, any help you can offer so that Safari users can see my page clearly would be appreciated.
    The link to my index.php and wp-layout.css is under the main directory tree under http://www.aqueerslife.com/
    Thanks!
    Josh

  2. Root
    Member
    Posted 9 years ago #

    Well you have got so many framesets going on I couldn't find the source code.

  3. rsbenedict
    Member
    Posted 9 years ago #

    There are only two frames. The top one containing the title and taglilne and the bottom one containing everything but the title and the tagline. The top fram is 250px long.

  4. Root
    Member
    Posted 9 years ago #

    Something has gone wrong with the math for header, content and menu. Those other browsers may look OK but they are only degrading well.

  5. rsbenedict
    Member
    Posted 9 years ago #

    I got the math to work by rewriting the wp-layout.css from scratch. But I'm still having trouble with the menu layout. It's displaying all wrong. The titles of each section of the menu should be gray and larger than the links inside. Each section should have a lt gray border around it. There should be no bullets or other list decorations. Any ideas?
    Thanks for your help so far!

  6. Anonymous
    Unregistered
    Posted 9 years ago #

    Well, all that looks like poorly written HTML.

    <frameset rows="225,*" frameborder="NO" border="0" framespacing="0">
    <frame src="title.php" name="topFrame" scrolling="NO" noresize >
    <frame src="index.php" name="mainFrame">
    </frameset>
    <noframes><body>
    </body></noframes>
    </html>

    Why is your frameset (ark... why don't you use CSS with all the above mentionned modern browsers ?) located outside of your body tags ?

  7. Root
    Member
    Posted 9 years ago #

    I did hint at this in my first post. Perhaps not as precisely as I should have done.
    Our friend chiensavant is a clever dog and is spot on. Its a mess. Sorry.

  8. rsbenedict
    Member
    Posted 9 years ago #

    Thanks, for the help. I don't know how to make the title remain at the top with css. I'll do a websearch to figure out how. I removed the framset. I use dreamweaver to format my html and dreamweaver wrote the html with the frameset outside the body tags.
    Even with the frames removed, safari displays the menu all wrong. I suspect there's some error with the ul and li tags. I'm not that familiar with html, as I've said, I usally write my pages in flash, so I will look up this specification and see if I can spot an error.
    Thanks for all the help!

  9. Root
    Member
    Posted 9 years ago #

    I do not want to sound old fashioned but a lot of folks here do hand coding of their html and stuff. It is like gardening. If you get your gloves off you can feel the soil. Hope we have put you on the road to a rewarding learning experience.
    A page without frames is going to be a good start for you. By all means post again if you get stuck. We never got the chance to say - that could be a nice looking blog.

  10. oriecat
    Member
    Posted 9 years ago #

    The page looks a lot better to me already. With the header inthe frame, it was totally squishing the entries on my work com (which is 800x600). It hards to read the entries when they are smooshed into only half of the screen.

  11. Root
    Member
    Posted 9 years ago #

    Closing li tags is (i think part of xhtml) not in html 4.0.
    For the header: You could fix it to the background with position: fixed. Then it will stay put.
    Maybe lets stabilise the design then a safari guru will tell us the necessary hack, or in the meantime an error may come to light which is causing it.

  12. havok
    Member
    Posted 9 years ago #

    I had never had problems with Safari, it is a very highlevel browser and basically you dont need hacks to make it look good on safri (at least i havent had to make any) unlike ie/win, ie/mac.... so, the problem must be in your code.
    As Dan Cederholm points out, validation is a very usefull feature, and gives your site some "status".
    I validated your site, it has 45 errors :S
    check it out: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.aqueerslife.com%2F
    good luck
    -hvk

  13. rsbenedict
    Member
    Posted 9 years ago #

    Ok, I've made site 100% xhtml valid. Now what. It still displays wrong in safari. I wonder if safari can't read the css properly, because although it layouts the design correctly, the colors and the list decorations are wrong. I don't want list decorations and I want the titles of each section in a larger, gray font and the li's in each section blue. I also want a box around each section.
    Any safari user got any ideas?
    This is stumping me, though I've learned a lot in the process.
    Thanks again for all and any help!!!

  14. Root
    Member
    Posted 9 years ago #

    You have a bad series of typos at the critical point in menu ul ul li a. in the css

  15. rsbenedict
    Member
    Posted 9 years ago #

    Thanks! I didn't know there was a css validator so I got my css to validate as well!
    Now it displays correctly!
    Again, thanks all for your help! It's been a great learning experience and not it displays correctly in ie5.5+ both on mac and windows, along with opera and firefox on mac and windows, and FINALLY in safari on the mac!
    Thanks again!

  16. Root
    Member
    Posted 9 years ago #

    Well IMHO you are not quite done. It now needs either left or center alignment. Just my two cents.

  17. rsbenedict
    Member
    Posted 9 years ago #

    The whole page?
    Do I go about that with creating another div that incloses both the header and the content and then creating a css entry that tells it to text-align center? I'm not sure how to position the entire thing in the center automatically. I've tried to mimic it with placing it about 15% from each side.
    Any ideas would be great!
    Thanks, root!

  18. rsbenedict
    Member
    Posted 9 years ago #

    Hi, Root!
    Done! I've added back the #rap and given it a width of 60% with margin-left and margin-right set to auto.

  19. Root
    Member
    Posted 9 years ago #

    OK. A typo. Your css shows width at 100%.

  20. Root
    Member
    Posted 9 years ago #

    One last thing. Add position : relative; to the css for #rap

  21. rsbenedict
    Member
    Posted 9 years ago #

    I had to change it, when I had it at 60%, everything but the header squished to 60% of the screen. I've tried playing with different settings, but if I change the #rap to anything less than 100%, the whole layout except for header is squished.

  22. Root
    Member
    Posted 9 years ago #

    Well in that case it is going to occupy the full width of the screen. I have gone as far as I can on this at the moment. Sorry it did not work. Best remove the rap and go back one step. I will have a look tomorrow (gmt)

  23. rsbenedict
    Member
    Posted 9 years ago #

    thanks, til tomorrow!

  24. rsbenedict
    Member
    Posted 9 years ago #

    I think I did it, root!
    When you get a chance, check it out!
    Thanks!

  25. Root
    Member
    Posted 9 years ago #

    I would go a bit wider. Plus 15% maybe.

  26. rsbenedict
    Member
    Posted 9 years ago #

    Hi, Root!
    Thanks, done and done! I've upped my size to 75% of the window and added the text-align center at the body tag of my css. I already had tex-align: left for the content.
    Thanks so much for all your help!
    I was going to work on fixed positioning, but after I read that it is not supported in most of the browsers, especially in windows, I decided not to bother.
    Thanks again!

  27. Root
    Member
    Posted 9 years ago #

    Well congratulations.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.