SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Cross-browser

  1. #1
    SitePoint Enthusiast Sanctus's Avatar
    Join Date
    Jan 2012
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Cross-browser

    I threw together a temporary page to put on my website (Please do not take my work to use as your own. Thanks!). The issue I am having is getting it to appear the same on the major browsers: IE, FF and GC. It has been validated already. Do you see anything that I am missing? I have this feeling there is. The other day I accidently put html/css instead of text/css and it drove me mad. lol Sometimes we tend to overlook simple mistakes. Thank you for your extra set of eyes gentlemen or ladies!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--(C) Notice!-->
    	<head>
    	<title>
    	</title>
    		<style type="text/css">
    			div#o
    			{
    				width: 800px;
    				padding: 0px;
    				border: 0px;
    				text-align:left;
    				margin: 0 auto;
    			}
    			div#b
    			{
    				height: 1000px;
    				border: 7px solid rgb(59,59,59);
    				background-color: rgb(248,248,255);
    			}
    			body
    			{
    				margin: 0;
    				padding: 10px 0px 0px 0px;
    				text-align:center;
    				background-color: rgb(131,139,139);
    			}
    			div#f
    			{
    				text-align: right;
    				font: normal small-caps 100 12px/24px "Arial", Helvetica, sans-serif;
    			}
    			.sta
    			{
    				text-align: center;
    				font: normal small-caps 400 47px/10px Georgia, serif;
    			}
    			#d4
    			{
    				padding-top: 15px;
    			}
    			#d5
    			{
    				font-style:italic;
    			}
    			div#m
    			{ 
    				padding: 35px 50px 0px 50px;
    				text-align: justify;
    				font: normal normal 300 20px 'times new roman', sans-serif;
    			}
    			table, tr
    			{
    				border: 0px;
    				margin-right: 20px;
    				vertical-align: top;
    				float:left;
    			}
    			div#sp { padding-top:10px; }
    		</style>
    	</head>
    	<body>
    		<div id="o">
    			<div id="b">
    				<h1 class="sta" id="d4">
    				</h1>
    				<h3 class="sta" id="d5">
    				</h3>
    					<div id="m">
    						<table>
    						<tr><td><img style="border: 5px solid rgb(255,255,255);" alt="Portrait" src="media/meweb.jpg" width="250px"></td></tr>
    						</table>
    						<div id="sp">
    						</div>
    					</div>
    			</div>
    			<div id="f">
    			</div>
    		</div>	
    	</body>
    </html>

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    One thing I noticed is your IMG width="..." value is wrong you don't use px on that markup attribute value - the validator might not catch that one. ;-) Also the semantics are a little peculiar such as skipping headings, etc.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Apart from the fact that the image doesn't display when I run the page locally because you haven't given a full URL, I can't see any noticeable differences in IE8, Fx or Chrome. What problems have you found?

  4. #4
    SitePoint Enthusiast Sanctus's Avatar
    Join Date
    Jan 2012
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    When I ran it in iexplorer off my computer it was coming out fine. As soon as I put in on my server it goes haywire. Switching to em helped some with consistancy across the board. I have made several tweaks. I am hesitant to use a conditional stylesheet when it the cause could be my CMS (ModX Revolution). Anyone else have experience with ModX Rev.? This is irritating. The whole point of using it was to save time. Thank you guys for your quick responses!

  5. #5
    SitePoint Enthusiast Sanctus's Avatar
    Join Date
    Jan 2012
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Stevie D The portrait is located on my server in my ftp. In IE8-9 the padding or margins are, as usual, messed up. I rewrote the sheet seen above along with adding some other elements. Adding a conditional markup might fix it. I assume coding while being drowsy does not mix too well. lol I do not want to post the new one to avoid certain people from copying it. You fellows could throw that together in no time, so I doubt you would bother anyhow.
    Last edited by Sanctus; Jan 12, 2012 at 12:23. Reason: typo

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,164
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Can you at least post a screen-shot of the problem, to let us see what you're seeing? Which margins/padding are causing the problems? In what way are they "messed up"?

  7. #7
    SitePoint Enthusiast Sanctus's Avatar
    Join Date
    Jan 2012
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @TechnoBear Yea, I will post a picture as an example in a little bit. I have been really busy doing other things today and have not finished tweaking it. (*_*)

  8. #8
    SitePoint Enthusiast Sanctus's Avatar
    Join Date
    Jan 2012
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It went from bad to worse. This fellow has pretty much gave up. I have been trying everything an amateur can do to fix it. What I am trying to do is obviously not working.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--COPYRIGHT (C) DATE HERE. NAME HERE.-->
    	<head>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    		<title>
    			LINGUA LATINA
    		</title>
    			<style type="text/css">
    				body
    				{
    					position: relative;
    					font-size: 62%;
    					margin: 0;
    					padding: 1em 0em 0em 0em;
    					text-align: center;
    					background-color: rgb(255,255,255);
    					background-image: url('/media/ele/bgb.gif');
    					background-position: center center;
    					background-attachment: fixed;
    					background-repeat: no-repeat;
    				}
    				div#o
    				{
    					position: relative;
    					width: 80em;
    					padding: 0em;
    					border: 0em;
    					text-align: left;
    					margin: 0 auto;
    				}
    				div#b
    				{
    					position: inherit;
    					margin: 2.5em 0em 0em 0em;
    					height: 100em;
    					border: 0.7em solid rgb(0,0,0);
    					outline: rgb(255,0,0) solid 2.5em;
    					background-color: rgb(255,255,255);
    				}
    				div#t
    				{
    					position: inherit;
    				}
    				table#spl, tr#spl
    				{
    					position: absolute;
    					top: 0em;
    					left: 30em;
    					bottom: 2.5em;
    					z-index: 3;
    				}
    				table#h, tr#h
    				{
    					position: inherit;
    					padding: 4em 0em;
    					margin: 0 auto;
    					display: block;
    					text-align: center;
    					z-index: 2;
    				}
    				div#m
    				{ 
    					position: inherit;
    					padding: 3em 2.5em 0em 2.5em;
    					text-align: justify;
    					font: normal normal 300 2.0em "Times New Roman", Times, sans-serif;
    				}
    				table#p, tr#p
    				{
    					position: inherit;
    					border: 0em;
    					margin: 0em 1em 0.2em 0em;
    					vertical-align: top;
    					float: left;
    				}
    				p#sp 
    				{ 
    					position: inherit;
    					padding-top: 1em; 
    				}
    				div#f
    				{
    					position: inherit;
    					text-align: right;
    					font: normal small-caps 400 1.2em/2em "Arial", Helvetica, sans-serif;
    					color: rgb(0,0,0);
    					z-index: 3;
    				}
    			</style>
    	</head>
    	<body>
    		<div id="o">
    			<div id="b">	
    					<div id="t">
    						<table id="spl">	
    							<tr id="spl">
    								<td>
    									<img alt="DUMMY ELEMENT" src="/media/ele/cs.png" height="327" width="245">
    								</td>
    							</tr>
    						</table>
    						<table id="h">
    							<tr id="h">
    								<td>
    									<img alt="DUMMY ELEMENT" src="/media/ele/h.png" width="388" height="71">
    								</td>
    							</tr>
    						</table>
    					</div>
    					<div id="m">
    						<table id="p">
    							<tr id="p">
    								<td>
    									<img style="border: 0.25em solid rgb(0,0,0); outline: rgb(255,255,255) solid 0.2em;" alt="DUMMY ELEMENT" src="media/meweb.jpg" width="250">
    								</td>
    							</tr>
    						</table>
    						<p id="sp">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    					</div>
    			</div>
    			<div id="f">
    				COPYRIGHT &#169 2011 DATE HERE. NAME HERE. ___ RIGHTS RESERVED.
    			</div>
    		</div>	
    	</body>
    </html>
    Chrome


    Firefox


    IE9


    Opera

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You cannot have duplicated ID values in the markup and attempting positioning with TABLE isn't an ideal situation either I suspect the duplicated ID values are causing some tiny shift. It looks like a cross over of two different coding styles that won't play nicely together.

  10. #10
    SitePoint Enthusiast Sanctus's Avatar
    Join Date
    Jan 2012
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks bud for your insight! I knew .class is used for multiple items and #id is used for single items, but I somehow missed it. Table has been working terribly for positioning. lol I have been gradually teaching myself coding for about a year now to expand my computer knowledge. As a do-it-yourself guy, I would much rather build a site myself than have someone else do it for me. Agreed? I wonder why there is not a more universal standard across different browsers? Each one has some uniqueness to them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •