Support » Themes and Templates » CSS layout in Safari

  • 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

Viewing 15 replies - 1 through 15 (of 26 total)
  • Well you have got so many framesets going on I couldn’t find the source code.

    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.

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

    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!

    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 ?

    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.

    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!

    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.

    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 800×600). It hards to read the entries when they are smooshed into only half of the screen.

    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.

    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

    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!!!

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

    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!

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

Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘CSS layout in Safari’ is closed to new replies.