15 replies [Last post]
ddferraro
Offline
newbie
Last seen: 12 years 38 weeks ago
Timezone: GMT-6
Joined: 2009-11-16
Posts: 2
Points: 3

Hello all, I dont know what to say... I'm a CSS beginner, and I've been working on this site SO long trying to get everything to look consistent on my mac between safari and firefox. I eventually got it, but when I had a friend look at the site on his PC laptop, it looked NOTHING like ANYTHING I had done. I'm completely at a loss and feel like I wasted about a week of my life. Any suggestions as to why the following format looks DRASTICALLY different Mac to PC? Thanks so much for any helpful suggestions or comments. I've just included the page layout and the important classes. I also attached two screen shots of this mess. Unreal. I've never seen it THIS bad before. Thanks again.

.siteheader {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 2.6em;
	color: #F0D2A2;
	text-align: center;
	width: 900px;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	font-weight: bold;
}
.container {
	width: 900px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 600px;
	background-image: url(images/vintageframe.gif);
	background-repeat:no-repeat;
	margin-top: -24px;
}
.navigation {
	color: #895E39;
	width: 70px;
	padding: 5px 0px 0px 5px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align: left;
	float: left;
	clear: both;
	margin-top: 100px;
	margin-left: 114px;
	margin-bottom: 0px;
	overflow: auto;
	margin-right: 0px;
}
.pagemarker {
	color: #000000;
	clear: none;
	float: left;
	width: 80px;
	padding: 5px 0px 0px 5px;
	margin-top: 100px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	text-align: left;
}
.submitbox {
	text-align: center;
	width: 150px;
	margin-left: 114px;
	margin-top: 0px;
	clear: left;
	float: left;
	color: #8F5923;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 15px 0px 0px;
}

<body>
<div class="siteheader">
<span class="style1 style7">the</span>danny<span class="style1 style8">jack</span>fiasco<span class="style1 style7">com</span></div>
<div class="container">
<div class="navigation">
     <h5>
     <a href="index.html">HOME</a> <br>
     <a href="news.html">NEWS</a> <br> 
     <a href="dates.html">DATES</a> <br> 
     <a href="bio.html">BIO</a> <br> 
     <a href="store.html">STORE</a> <br> 
     <a href="blogs.html">BLOGS</a> <br> 
     <a href="pics.html">PICS</a> <br>
     <a href="vids.html">VIDS</a> <br> 
     <a href="fans.html">FANS</a> <br> 
     <a href="more.html">MORE</a> <br> 
     <a href="info.html">INFO</a>
    </h5>
   </div>
   <div class="pagemarker">
   ~~~~~&gt;<br>
   ~~~~~&gt;<br>
   ~~~~~&gt;<br>
   ~~~~~&gt;<br>
   ~~~~~&gt;<br>
   <span class="style7">~~~~~&gt;</span><br>
   ~~~~~&gt;<br>
   ~~~~~&gt;<br>
   ~~~~~&gt;<br>
   ~~~~~&gt;<br>
  ~~~~~&gt;
  </div>
<div class="submitbox">
     <form action="gdform.php" method="post">
       <div align="center">
          <input type="hidden" name="subject" value="Form Submission" />
          <input type="hidden" name="redirect" value="thankyou.htm" />
         <p align="center">BE A FIASCO FAN!<br>
          <input  class="formtext" type="text" name="email" onfocus="this.value=''" value="Enter Email Here"/>
          <br>
        </font><font face="Verdana, Arial, Helvetica, sans-serif">
        <input type="submit" name="submit" value="submit"/>
        </font>       
       </div>
    </form>
  </div>
  <div class="centeredcontent">
 <p> 
 Content here
 </p>
  </div>
 
</div>
 
</body>

AttachmentSize
Picture 1.png257.86 KB
Picture 2.png76.6 KB
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Three things

  1. You haven't shown in your code whether you have a doctype on your page. If you haven't got one, you need one.
  2. You haven't indicated which PC browsers you've checked in.
  3. Please use code tags when posting code.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ddferraro
Offline
newbie
Last seen: 12 years 38 weeks ago
Timezone: GMT-6
Joined: 2009-11-16
Posts: 2
Points: 3

Apologies, here is the

Apologies, here is the doctype: DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"

... And the browser's that displayed the code incorrectly were firefox, and especially explorer on a PC. Mac browsers were fine.

Thanks again.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 day 16 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

Link?

Link?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 day 16 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

Link?

Link?

DanielHardy
Offline
Regular
Walsall UK
Last seen: 11 years 5 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

Very Easy way of overcoming

Very Easy way of overcoming this problem. I also was close to ripping my hair out with this. Simple bit of code that will read what machine the site is being viewed on, and then use the appropriate style sheet.

Very easy to do assuming you are using an external style sheet?

Just add the following code:

<script type="text/javascript">
 
/***********************************************
* Different CSS depending on OS (mac/pc)-  Dynamic Drive (<a href="http://www.dynamicdrive.com" rel="nofollow">www.dynamicdrive.com</a>)
* This notice must stay intact for use
* Visit <a href="http://www.dynamicdrive.com/" rel="nofollow">http://www.dynamicdrive.com/</a> for full source code
***********************************************/
 
var csstype="external" //Specify type of CSS to use. "Inline" or "external"
 
 
 
var mac_externalcss='chwmcmac.css' //if "external", specify Mac css file here
var pc_externalcss='chwmc.css'   //if "external", specify PC/default css file here
 
///////No need to edit beyond here////////////
 
var mactest=navigator.userAgent.indexOf("Mac")!=-1
if (csstype=="inline"){
document.write('<style type="text/css">')
if (mactest)
document.write(mac_css)
else
document.write(pc_css)
document.write('</style>')
}
else if (csstype=="external")
document.write('<link rel="stylesheet" type="text/css" href="'+ (mactest? mac_externalcss : pc_externalcss) +'">')
 
</script>

dana.woodman
dana.woodman's picture
Offline
newbie
Sonoma County, CA
Last seen: 12 years 38 weeks ago
Sonoma County, CA
Timezone: GMT+1
Joined: 2009-11-17
Posts: 1
Points: 1

I would not suggest throwing

I would not suggest throwing in Javascript to solve your problem as it is most likely a lack of understanding about CSS.

I would first suggest posting a demo page for us to check out.

Have you attempted to validate your HTML or CSS yet?

You should not need to clear or float the submit box as it should be contained in the box that contains the navigation.

I would suggest something like:

CSS:

#content {
    float: right;
    width: 400px;
}
#sidebar {
    float: left;
    width: 200px;
}

HTML:

<div id="content">
    <h3>First Blog Post</h3>
    Put video here...
</div>
<div id="sidebar">
    <ul id="menu">
        <li><a href="/" title="Visit the home page">Home</a></li>
        <li><a href="/news.html" title="Visit the news page">News</a></li>
        ...
    </ul>
</div>

You will need to change the width to suit.

A few side notes:
- You should be using ID's for major content blocks (like header, container, footer) instead of classes as they only should appear once in your document.
- You are using the "font" tag which is depricated, you should use all presentational markup using CSS
- You also should not have your navigation in a h5 tag. Instead put your menu in a list, with each item in a list item:

<ul id="menu">
     <li><a href="/" title="Go to the home page now">Home</a></li>
     <li><a href="/news.html" title="View our most recent news">News</a></li>
      etc...
 </ul>

- Make sure to give you links proper title.
- Dont use align="center", us CSS instead

Anyways, hope that helped.

Cheers,
Dana W.

DanielHardy
Offline
Regular
Walsall UK
Last seen: 11 years 5 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

Using the script I provided

Using the script I provided would not suggest a lack of CSS understanding.

It can save a lot of time trying to fix problems. The fact of the matter is, your sites are not going to look IDENTICAL on all browsers. Using a seperate style sheet for both PC and Mac can save you a lot of time and effort, whilst still being able to play around with CSS.

Say if your navbar is too large on your PC but perfect on a Mac. You can keep the styling you have that works fine with Mac and simply alter your style sheet so that it looks the same on a PC.

Thus saving you a lot of time in trying to find a middle ground.

(Not to confuse matters but a Mac is technically a PC!)

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 47 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

dana.woodman wrote: I would

dana.woodman wrote:

I would not suggest throwing in Javascript to solve your problem as it is most likely a lack of understanding about CSS.

I agree with Dana. Using JS to sniff out browsers and OS's isnt the best way. Get a good grasp on the do and donts of CSS. Provide us a link so we can really nail down the problem

DanielHardy
Offline
Regular
Walsall UK
Last seen: 11 years 5 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

If you want to learn CSS

If you want to learn CSS coding, I would agree that the javascript option is not the best.

However, if you want an easy fix, and want your site working as soon as possible. Use my code Smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 day 16 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

DanielHardy wrote:If you

DanielHardy wrote:

If you want to learn CSS coding, I would agree that the javascript option is not the best.

I know the place looks different but it's still CSS creator. Tongue

DanielHardy wrote:

However, if you want an easy fix, and want your site working as soon as possible. Use my code Smile

I can't abide with that. I've not seen a problem that required browser sniffing since the version 4 browser wars. Hopefully that doesn't change with the advent of mobile browsers.

DanielHardy
Offline
Regular
Walsall UK
Last seen: 11 years 5 weeks ago
Walsall UK
Timezone: GMT+1
Joined: 2009-11-17
Posts: 24
Points: 26

I never said it REQUIRED it,

I never said it REQUIRED it, just a suggestion that will definetly work. Like I said, it depends on what he wants.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 day 16 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

DanielHardy wrote:I never

DanielHardy wrote:

I never said it REQUIRED it, just a suggestion that will definetly work. Like I said, it depends on what he wants.

I don't think it's ethical to steer someone new to CSS in the wrong direction. "Definitely working" doesn't enter into it.

No offense intended, just judging from the tone of this forum and the expectations laid out in the posting guide, I'm not sure "good enough" has a place here. I could be wrong.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Verschwindende wrote: I could

Verschwindende wrote:

I could be wrong.

No, you're not wrong. Daniel's suggestion is completely against the sort of approach this forum recommends.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

ddferraro, the advice given

ddferraro,
the advice given by the majority is sound. Do not browser sniff. Develop for standards compliant browsers and use conditional comments to feed IE additional (or overriding) styles. Also, you'll need time to learn the IE bugs - most of which have been documented with workarounds.

without digging too deeply, I can see the IE double margin bug is affecting your .navigation column. add display: inline; to that class to fix IE (it's ignored by standard browsers because float overrules it, but it corrects IE).

A link to a test page will get you the most help Wink

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 1 day 16 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2051
Points: 2283

wolfcry911 wrote: ... without

wolfcry911 wrote:

... without digging too deeply, I can see the IE double margin bug is affecting your .navigation column.

Nice spot. Smile float and margin on the same side doubles the margin in IE666 (the browser of the beast).