HTML - Browser Padding Compatibility

Hi,
I have had a new template developed for osCommerce, most browsers display the site correctly such as Firefox but Internet Explorer has some issues.

IE shows the site as being aligned differently with some other design issues.

I think it may be a problem with the stylesheet.

My domain is InkRound.co.uk

Here is the CSS code from stylesheet.css

My site is using a HTML based template with osCommerce.

i have resolved this thanks

Hey, I'm having issues with coding a website to be cross-compatible with Firefox and Internet Explorer (views fine in Firefox). I'm a BS artist when it comes to web design, and I could really use some help.


The site is at this address: www.thepynebros.com

It views correctly in Firefox, however, Internet Explorer distorts the font sizes, and will not wrap the CuteNews script around the picture of the trees on the index page.

Can someone help me out? What am I doing wrong?

Hi,

I have recently downloaded a web template and have been editing it in Dreamweaver CS4. I created a web menu via an application I bought online and intergrated that into the webpage.

It displays out of line in Dreamweaver however appreas to work fine (everything in line) in IE 7.

I do not know where I am going worng with my toolbar / web menu and what I need to change for compatibility. It is written in java but I suspect its some dodgy html code that has be written by me.

The website is www.ritzphoto.net/newsite/

css
Code:

body {
	margin: 0px;
	padding: 0px;
	background: #242323;
	text-align: justify;
	font: 13px Arial, Helvetica, sans-serif;
	color: #444444;
}

h1, h2, h3 {
	margin-top: 0px;
	font-weight: normal;
	color: #FFFFFF;
}

h1 {
	font-size: 2.4em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.4em;
}

p, ol, ul {
	margin-bottom: 1.8em;
	line-height: 160%;
}

a {
	color: #000000;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a img {
	border: none;
}

#wrapper {
	width: 900px;
	margin: 0 auto;
	border: 10px solid #FFFFFF;
}

/* Header */

#header {
	width: 900px;
	height: 150px;
	margin: 0px auto;

}

#header a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Logo */

#logo {
	float: left;
	padding-left: 20px;
}

#logo h1, #logo p {
	margin: 0px;
	line-height: normal;
	font-weight: normal;
	color: #FFFFFF;
}

#logo h1 {
	padding: 25px 0px 0px 0px;
}

/* Menu */

#menu {
	float: right;
}

#menu ul {
	margin: 0px;
	padding: 49px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	margin: 0px;
}

#menu a {
	display: block;
	width: auto;
	padding: 6px 20px;
}

#menu a:hover {
	text-decoration: underline;
}

#menu .active {
	background: #404040;
}

#menu .active a {
	background: url(images/img02.gif) no-repeat 100% -40px;
}

/* AWM */

#awmAnchor-menu {
	width: 900px;
	padding: 10px 0px 0px 0px;
	background: #FFFFFF;
	margin: 0px auto;

}
/* Page */

#page {
	width: 900px;
	margin: 0px auto;
	padding: 10px 0px 0px 0px;
	background: #FFFFFF;
}

#header-pic {
	background: url(images/img05.jpg) no-repeat left top;
	width: 900px;
	height: 210px;
}

/* Content */

#content {
	float: right;
	width: 570px;
}

.post {
	margin: 0px 0px 30px 0px;
}

.post .title {
	margin: 0px;
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

.post .title h1 {
}

.post .entry {
	padding: 0 20px;
}

.post .meta {
	font-weight: bold;
	padding-left: 20px;
}

.post .byline {
	margin: 0px;
	padding-left: 20px;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 300px;
}

#sidebar-bgtop {
}

#sidebar-bgbtm {
	background: url(images/img03.jpg) no-repeat left bottom;
}

#sidebar-content {
	background: url(images/img01.jpg) repeat-y left top;
}

#sidebar ul {
	padding: 0px 0 5px 0;
	margin: 0px;
	list-style: none;
}

#sidebar li li {
	margin-left: 20px;
	margin-right: 20px;
	line-height: 30px;
	padding-left: 15px;
	border-bottom: 1px dashed #BDBDBD;
	background: url(images/img04.jpg) no-repeat left 50%;
}

#sidebar li ul {
	margin-bottom: 1.8em;
	list-style: none;
}

#sidebar h2 {
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

#sidebar a {
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Search */

#search {
}

#search form {
	margin-bottom: 1.8em;
	padding: 0px;
}

#search fieldset {
	margin-left: 20px;
	padding: 0px;
	border: none;
}

#search #s {
	width: 160px;
}

/* Footer */

#footer {
	clear: both;
	width: 900px;
	height: 50px;
	margin: 0px auto 30px auto;
	color: #FFFFFF;
}

#footer p {
	margin: 0px;
	padding: 19px 0px 0px 0px;
	text-align: center;
	line-height: normal;
	font-size: smaller;
}

#footer a {
	color: #FFFFFF;
}

Cheers,

Dave

Hi everyone. New to the forums and thought I could get some help with regards to my personal website http://judyhuynh.ca

Anyways, the problem is the browser compatibility. Just when I thought everything looked OK, I checked it out on my other browsers (Chrome, Firefox, Safari, Opera) but there was one problem with IE. I use Cutenews for blogging and it does not show the line breaks in between paragraphs and it does not show my .png profile picture on the left of the sidebar where there's the quick bio.

http://browsershots.org/http://judyhuynh.ca/

Line breaks in Cutenews are generated automatically when typing paragraphs. So I don't know and the .png thumbnail on the left, nooo idea about that.

It irritates me because it just looks so ugly on IE, ahha and some people still use that 'not-so-great' browser.

Help is much appreciated!!!

I have a music blog on blogger (http://mildtowild.blogspot.com) and I recently found out using browser shots that my site does not look right in IE. (CURSE YOU IE!). I have a lot of code and css, and am not quite sure where to start looking. I do not believe my page is html or xhtml compliant, but I'm pretty sure it's impossible to make any blog from blogspot 100% compliant. I'm pretty sure I have closed all my tags properly and my css is correctly structured. I am just puzzled as to how it can look so perfect in firefox and safari, and then be radically different in all IE versions.

I have included screenshots of what it looks like in both browsers, also feel free to view the source on my page, and if any of you have any suggestions as to what to check or try, please be my guest. Thanks for looking!

IE: http://img360.imageshack.us/img360/9...be72325hn9.png
Firefox & Safari: http://img370.imageshack.us/img370/8250/ffkl6.jpg

I just found out that a site I built for a nonprofit isn't working properly on Internet Explorer or Firefox. It does work on Safari. It appears the client-side image maps are the problem. I used <map> and <area> inside <img>. Here is some of my code:

<img src="About.jpg" width="1100" height="825" usemap="about" />
<map name="about" />
<area shape="rect" coords="285,29,316,50" href="" title="HOME" alt="Home" />
<area shape="rect" coords="383,29,460,50" href="" title="FOR TEACHERS" alt="For Teachers" />
</map>

(URLs removed intentionally to protect client's privacy.)

I was going by the book, Beginning HTML, XHTML, CSS, and JavaScript, by John Duckett, published in 2010. According to this book, this is the recommended type of image map. It says this code should be compatible with today's most popular browsers.

So does this type of image map simply not work on Internet Explorer and Firefox? Or is there something wrong with my code? What type of image map does work with all the major browsers?

Hi,

I am working on my website with my limited knowledge of HTML.

As I am using frames I've found that my website will not appear in some browsers (namely firefox, which I find unusual as its usually excellent). It works fine in safari (i'm on a mac).

the site is www.sambrewster.co.uk

I'm creating a noframes site too so the option is there.

I thought it might have something to do with the character encoding?

Any help or pointers would be excellent! Just to know where I've gone wrong would be great.

Thanks very much

Heya,

I'm working on my new website design for http://nickerson.biz and all was going good. Came to the point where I check compatibility in all browsers. Figured everything would be fine since its 100% xhtml transitional valid. Turns out IE ****s it up real bad. Has 5 noticeable things that SHOULD NOT be happening.

Site looks great in FF, but IE... I can't figure out whats going wrong.

http://i42.tinypic.com/nntyly.png

Ideas?

View source to see coding, all seems fine.

Hey all,

[moved to CSS forum]

Okay so it may be that I'm just overly tired or just overly wrong in how I coded this one page, but I need you help.

I've been working with CSS for quite awhile-using a CSS sheet to populate HTML code that entirely relied on DIV IDs. I have also been using relative positioning until now. I mention this because for the most part this worked in creating mostly identical layouts between IE8, Firefox 3.5, and Safari 3.

Today, I decided to code a page using mostly DIV STYLE tags instead of editing the CSS page. I thought this might be more efficient, and it certainly was easier to code. I also used absolute tags instead of relative.

Using Dreamweaver CS4's live view everything displayed as it should. So I uploaded it all in Safari and again-everything displayed as it was designed. However, IE8 seemed to display all of the content that was positioned absolutely about 50px too far to the right. Firefox-normally my friend-wouldn't even display to top portion of the page. Since the majority of hits are IE8 (sigh) I have just temporarily coded it to display correctly within that browser-but I need help to figure out what to change so that such a compromise doesn't need to occur.

The page is live at my site http://qwertcorp.com/reactivate . There you can see the CSS and HTML code. I will post the raw code in here in a few minutes.

I know these are probably just rookie (read: stupid/sloppy) mistakes, but I really want to learn how to avoid this.

Thanks so much in advance!

How do you use make it so the space between BULLETS (HTML DISC) does not have such a large space between the lines when viewing between INTERNET EXPLORER and Any other browser like Firefox??

http://www.camarosource.ca/main_new_...new_layout.htm

Right side "Recent Posts". You'll notice that if you view with Firefox that it shows the words close to get on top of each other.

HOWEVER, View the same link in INTERNET EXPLORER and you'll soon discover it's now what's almost 1 more line inbetween the top words and the ones below them.

How can I STOP THIS?? If I make it fit in Firefox, it's WAY too high in IE cause it adds another line. If I make it fit in IE, it's like 3/4 the height of the area for Firefox.

Thanks!

Hi guys,

I am just adding an image in the home page of citydental.ie. If I look at the site in Mozilla it is ok, the image is shows. If I look at the site on IE8 it doesnt.

I guess whoever designed this site earlier did it for old browsers?

How can I repair this problem?

thanks a million guys
Nat

I'm working on a web-type project which will ultimately end up on DVD.

The thing works well on a PC but on Macs I'm having issues.

Navigation through the site is via button graphics contained in a folder called Buttons.

The HTML I use to reference these buttons is "../../Buttons/ImageName.jpg" or similar.

Macs return a placeholder with "???" rather than the image.

I've tested this on most browsers including Safari and as I say it works on a PC but not on a Mac.

Is it my coding or am I missing something?

Hello,

I'm new to webpage design and know very little HTML, but I am making a site with the help of a template and it seems to be working perfectly in Chrome, Firefox and Opera, but the moment I open the page in IE the frames are all broken and nothing is where it should be, could someone take a moment of there time and check the code below and maybe correct/clean it up it for me so I know where I have gone wrong, could you explain also why it works ok in those browsers and not IE?

Thanks in advance.

Code:

<html lang="en">
<head>
  <title>Hotel </title>
  <meta charset="utf-8">
  <meta name="description" content="Your description">
  <meta name="keywords" content="Your keywords">
  <meta name="author" content="Your name">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  
  <!-- styles for prettyPhoto -->
  <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all">
  
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript" src="js/maxheight.js"></script>
  <script type="text/javascript" src="js/cufon-yui.js"></script>
  <script type="text/javascript" src="js/Lane_-_Narrow_400.font.js"></script>
  <script type="text/javascript" src="js/cufon-replace.js"></script>

  <!--[if lt IE 9]>
  	<script type="text/javascript" src="js/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
  <![endif]-->
  <!--[if lt IE 7]>
	<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
  <![endif]-->
</head>

<body id="page1"  onLoad="new ElementMaxHeight();">	
<div class="main-extra1">
<!-- header -->
<header>
<div class="main">
<div class="extra-wrap">
<div class="logo">
<a href="index.html">The Hotel </a>
</div>
<div class="header-col">
<div class="wrapper">
<div class="socials">
<a href="" class="normaltip" title="Facebook"><img src="images/facebook.jpg" alt="" /></a><a href="" class="normaltip" title="Twitter"><img src="images/twitter.jpg" alt="" /></a>
</div>
</div>
<div class="wrapper">
<form action="" id="search-form">
<fieldset>
<label><input type="text" value="Site Search" onFocus="if(this.value=='Site Search'){this.value=''}" onBlur="if(this.value==''){this.value='Site Search'}" /></label><input type="image" src="images/search-form-input-img.png" alt="" />
</fieldset>
</form>
</div>
<nav>
<ul class="sf-menu">
<li><a href="index.html" class="current"><strong><strong>Home</strong></strong></a></li>
<li><a href="singles.html"><strong><strong>Rooms</strong></strong></a>
<ul>
<li><a href="singles.html">Singles</a>
<li><a href="doubles.html">Doubles</a></li>
<li><a href="doublesd.html">Deluxe Doubles</a></li>
<li><a href="twinfamily.html">Twin/Family Rooms</a></li>
<li><a href="apparts.html">Appartments</a></ul></li>
<li><a href="menus.html"><strong><strong>Services</strong></strong></a>
<ul>
<li><a href="restaurant.html">Restaurant</a>
<ul>
<li><a href="menus.html">Menu's</a></li>
<li><a href="restaurant.html">Functions</a></li>
</ul>
</li>
<li><a href="more.html">Bar/Quiz</a></li>
<li><a href="more.html">Live Music Nights</a></li>
</ul>
</li>
<li><a href=""><strong><strong>Reservations</strong></strong></a></li>
<li><a href="index-4.html"><strong><strong>Find Us</strong></strong></a></li>
</ul>
</nav>
</div>
<div class="clear"></div>
</div>
<div class="faded-indent">
<div id="fade">
<div><img src="images/slide1.jpg" alt=""  /><strong><img src="images/muse-img.png" alt="" /></strong></div>
<div><img src="images/gardenflat.jpg" alt=""  /><strong><img src="images/gardenflat.png" alt="" /></strong></div>
<div><img src="images/room4.jpg" alt=""  /><strong><img src="images/room14.png" alt="" /></strong></div>
<div><img src="images/slide4.jpg" alt=""  /><strong><img src="images/room9.png" alt="" /></strong></div>
<div><img src="images/slide5.jpg" alt=""  /><strong><img src="images/room12.png" alt="" /></strong></div>
</div>
<div class="pager"></div>
</div>
</div>			
</header>
<div class="main">			
<!-- content -->
<section id="content">
<div class="wrapper">
<article class="alpha omega grid_4_1 maxheight">
<div class="box1 maxheight">
<div id="twitter">
<div><center><a href="" class="code-icon button1">Sign Guestbook</a></center></div>
<div><br> <iframe src="http://?title=0&amp;byline=0&amp;portrait=0" width="320" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>            
</div>
</article>
<article class="omega alpha grid_8_1 maxheight">
<div class="box maxheight">
<div class="indent">
<h1 class="h1-pad"><strong>Welcome</strong></h1>
<div class="wrapper">
<figure class="left"><a href="images/front.jpg" class="lightbox-image" rel="prettyphoto" title="Hotel Exterior" ><img src="images/front.jpg" alt="" /></a></figure>
<div class="font">
<span class="title">A truly individual experience, full of innovative modern fittings and art that makes it a destination in itself.</span><br>The 14 boutique rooms in prime seafront location overlook the perfectly unspoilit Victorian seaside retreat. 
<p class="pad">We love our hotel and are very proud of it! Many of our guests return time and again and want to stay in a different one of our unique rooms every time! Come and see what 15 years of patient, continuous, development and passion for luxurious fittings and modern art can achieve - colourful, modern and deliberatley diffrent. </p>
</div>
<a href="more.html" class="button2">Read More</a>
</div>
</div>
</div>
</article>
</div>
<div class="indent">
<div class="container_12">
<div class="wrapper">
<article class="grid_4">
<h4><span><strong>Special</strong> Offer!</span></h4>
<div class="inside">
<div class="wrapper">
<figure><a href="images/wine.jpg" class="lightbox-image" rel="prettyphoto" title="Wine List" ><img src="images/winesmall.jpg" alt="" /></a></figure></div>
<h4 class="h4-pad">This Weeks menu</h4>
</div>
</article>
<article class="grid_4">
<h4><span><strong>in</strong> room</span></h4>
<div class="inside">
<ul class="list_1 list_1-line">
<li><a href="#">Telephone with a direct line</a></li>
<li><a href="#">Colour TV/Freeview/Sky</a></li>
<li><a href="#">Tea&Coffee Facilites</a></li>
<li><a href="#">Free Wifi</a></li>							
<li><a href="#">Full Fitted Kitchen(Appartments only)</a></li>
<li><a href="#">Sea Views on most rooms</a></li>
</ul>
<a href="more.html" class="button2">View All</a>
</div>
</article>
</div>
</div>
</div>
</section>	
<!-- footer -->
<footer>
<div class="container_12">
<div class="wrapper">
<div class="grid_6">
<div class="policy">Hotel  &copy; 2012&nbsp; |&nbsp; <a href="mailto:">Email</a></div>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- trigger -->
<div id="advanced">
<span class="trigger"></span>
<ul>
<li class="trigger_adv"><span>Links</span>
<ul>
<li><a href="">Us on Trip Advisor</a></li>
<li><a href="">Us on Bookings.com</a></li>
<li><a href="">Us on Hotels.tv</a></li>
</ul>
</li>
<li class="trigger_adv"><span>Photo Galleries</span>
<ul>
<li>Parties</li>
<li>Functions</li>
<li>Special Events</li>
</ul>
</li>
<li class="trigger_adv"><span>Video Galleries</span>
<ul>
<li>Room Videos</li>
<li>Event Videos</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
if ($("#fade").length) {
$('#fade').cycle({
timeout:	   7000,
speed:		   2000, 
pager:  '.pager'
});
}
});
</script>
<!-- panel begin -->
<script type="text/javascript">
$(function(){
$("#advanced .trigger").toggle(function(){
$(this).parent().animate({right:0}, "medium")
}, function(){
$(this).parent().animate({right:-172}, "medium")
});
});
</script>
<!-- panel end -->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>

Browser only accepts HTML pages, right ? If there is something non-html, then browser will not display it.
Question is, how does browser diplay PDF files ? is there a tag like <image> to display PDf files ?

I am sending a request through my browser to server. Server accesses another program and this program extracts information from a page which has non-html tags. How will these tags be taken care of for forwarding it to browser ?

Thanks