PDA

View Full Version : Rendering differences between web browsers?



deafdigit
Aug 16th, 2009, 05:54 PM
Hi everybody!


I have a problem with my site that I hope you guys can help me out with (duh!)

My site shows a black "ribbon" across the page (background image) with a flash object placed on it (with crummy, novice CSS). When viewed with Google Chrome browser it looks just as it's supposed to do: http://hornskovvindberg.dk/advoboweb/ebr/images/chromess.jpg

Earlier today (after feeling pretty good about the looks in Google Chrome) I loaded the page in FireFox browser and got this:
http://hornskovvindberg.dk/advoboweb/ebr/images/ffss.jpg
Notice how the flash object (the picture of the funny looking man) doesn't line up with the ribbon?
In Internet Explorer it's even worse:
http://hornskovvindberg.dk/advoboweb/ebr/images/iess.jpg

Can someone tell my what's causing this? Needless to say I want the flash image placed on top of the ribbon lining up perfectly.

Here's the relevant part of the code:

<html>
<head>
<title>EBR Forside</title>

<style type='text/css'>
.imgstyle {
position:relative;
top:67;
}
</style>

</head>
<body background="images/baggrundsbillede2.jpg">



<table width='890' border=0 align='center' class='imgstyle'>
<tr><td align='right'>

<object width="700" height="40">
<param name="movie" value="flash/forsidemenu.swf">
<param name="wmode" value="transparent">
<embed src="flash/forsidemenu.swf" width="700" height="40" wmode="transparent">
</embed>
</object>

</td></tr>
<tr><td align='center'>
<object width="890" height="312">
<param name="movie" value="flash/forsideflash.swf">
<embed src="flash/forsideflash.swf" width="890" height="312">
</embed>
</object>
</td></tr>
</table>
...




As mentioned above, the black "ribbon" thing is a background image (images/baggrundsbillede2.jpg). The flash object is the flash/forsideflash.swf.

There's a very realistic risk that I'm simply using a very very stupid method to make the site look as I want it to - you're also welcome to propose better ways to make the damn flash get placed where I want it :)

I really hope you can help me out, despite the long post. For every constructive answer I get, I promise to make equally contructive posts (helping with something I actually know how to do :D) in three other threads, so as not to seem unthankful (is that even a word?)
Anyway - thanks in advance!

//deaf_digit

noneforit
Aug 16th, 2009, 07:04 PM
hmmm I think its because you are using a table to overlay the flash on top of the background image. Even if you did get it to line up perfectly, it would likely get messed up again if you changed your screen resolution as this will alter the size of the background image.

RoofRabbit
Aug 16th, 2009, 07:20 PM
Please post your results when you get it fixed. I think laurieballard's suggestion is probably correct but I know less then you guys when it comes to website coding.

deafdigit
Aug 16th, 2009, 07:52 PM
I'll post any and all succesful solutions and fixes - just keep 'em coming.

It seems very likely that Laurieballard's right, but what should I do instead? Should I assign the CSS-code to the flash-object itself? And is there another way to do this other than using <span>? Oh... and would it actually help? :D

Thanks for the quick replies!

//deaf_digit

Scriptet
Aug 16th, 2009, 09:40 PM
Where you have


.imgstyle {
position:relative;
top:67;
}

You need to specify a unit after the 67, e.g did you mean 67px 67em 67cm or what? The browser can only guess what you meant.

OK some additional problems:

Firstly you haven't included a DOCTYPE (http://www.w3schools.com/tags/tag_DOCTYPE.asp) at the very type of your page, a DOCTYPE specifys what document type the document is, e.g XHTML or HTML 4 etc..
Not specifying a DOCTYPE at the very top of your page causes IE to go into quirks mode and to render things differently.

Secondly it's best to use CSS for anything presentational, and not adding extra HTML to alter the presentation, as CSS can be used to fully control the look of a page.
This means where you have used:

<body background="images/baggrundsbillede2.jpg">
instead change this to just
<body>

and add to your CSS
body { background:url('images/baggrundsbillede2.jpg'); }

Also the <center> tag is deprecated, as again this is a presentational tag and it's effect can be re-created via CSS, so there is no need for it. So use CSS to center elements. This can be done by adding margin: 0 auto; inside the CSS to an element with a defined width, e.g a DIV or an IMG.

Also it's better to use a DIV based layout rather than tables, as tables are meant for storing tabular data rather than a layout, obviously it's possible to use tables for a layout but it's old-school so you might as well learn the proper method now.
When you use DIV's for layouts you give each DIV an id or class doesn't really matter, and you can then fully control this DIV's presentation from the CSS.

Also you have some errors in that:
You have used </td></tr> when there were no <td> or <tr> left to close
You have used a </center> when there was no <center> open
Anyhow you shouldn't be using tables or the <center> element!!

bazz
Aug 17th, 2009, 01:59 AM
You definitely need a doctype, as said earlier but, this could be your new html code.





<div id='for_side_menu'>
<object id='flash_object'>
<param name="movie" value="flash/forsidemenu.swf" />
<param name="wmode" value="transparent" />
<embed src="flash/forsidemenu.swf" wmode="transparent">
</embed>
</object>

</div>
<div id='for_side_flash'>
<object>
<param name="movie" value="flash/forsideflash.swf" />
<embed src="flash/forsideflash.swf">
</embed>
</object>
</div>


Then your css could be:



*{
padding:0;
border:0;
margin:0;
}

body{
background: url(images/baggrundsbillede2.jpg);
}

#for_side_menu {
width:100%;
}

#for_side_menu object, #for_side_menu embed {
height:40px;
width: 700px;
}

#for_side_flash object, #for_side_flash embed {
width: 890px;
height: 312px;
}


I'm not sure about the css for the embed and object because I don't use it very often but try it and see what it does. Even if the values are wrong, the concept should put you on the right lines.

You should also name your divs etc relative to their content and not, their position. If you ever were to change the layout, the names would become very confusing as they are currently. No point having something labelled 'side' when it's in the middle, eh?

bazz

deafdigit
Aug 17th, 2009, 12:40 PM
Thanks a lot Scriptet and Bazz. I love these forums. Not only do you get quick replies, but the place is crowded with competent coders.

As for the DOCTYPE I actually thought of that for a short while, but then my girlfriend brought me pie, and I forgot what I was thinking about. I'll implement that right away.

I've never worked with div's but as Scriptet says, I might as well learn sooner than later, especially if they are better than tables (which I admit to have heard elsewhere too).

As for the use of CSS to control the entire look I actually did think of that, but since I needed the relative positioning to get the elements in the right places and I couldn't get that to work with centering stuff, I ditched the idea. I'll try the margin: 0 auto and report back.

Thanks for the sample code, Bazz, I'll try it out as soon as possible. As for the names of the elements forsideflash doesn't mean for_side_flash. It's danish and means frontpage_flash (forside = frontpage), but how would you know that ;)

Thanks for the help again. I'll let you all know how well it works.

deafdigit
Aug 17th, 2009, 02:30 PM
Okay, so I changed the HTML to what Bazz wrote. I implemented CSS via:

<link rel='stylesheet' href='styles.css' type='text/css' media='screen'>

This is the CSS I used:

*{
padding:0;
border:0;
margin:0;
}


body{
background: url(images/baggrundsbillede2.jpg);
}


#for_side_menu {
width:100%;
margin: 0 auto;
position:relative;
top:67;
}


#for_side_menu object, #for_side_menu embed {
height:40px;
width: 700px;
margin: 0 auto;
}


#for_side_flash object, #for_side_flash embed {
width: 890px;
height: 312px;
margin: 0 auto;
}

Now, everything seems to have the rigth size, but nothing is centered. I tried to add relative positioning and move stuff around with "top:200;". Nothing happens. I think we're on the right path here, so I'm looking forward to hear your thoughts :)


//deaf_digit

bazz
Aug 18th, 2009, 12:22 AM
Please post the html of you page. It is good when stil working on a page, to puts its css in the head section of the page. then when you need help its already there, in the page which we can copy and past and edit really quickly.

OK, I wrote that 'on the hoof' (as I typed) and so there will be bits that need to be added. Oh I just see I had added margin : 0 auto; so maybe you'll need to place that within the div tag as well as that for the object/embed.

Where possible, avoid positioning either 'relative' or 'absolute'. top:200, is incomplete but is only used when position is set to one of the above.

I'll look back in a while and if you have posted the whole page code, I'll work on it for you.

bazz

noneforit
Aug 18th, 2009, 09:20 AM
To center the top menu, you need to change the width. Currently its set at 100% (meaning stretch itself to be 100% of the browser resolution) so cant be centred.

Change to something like this:


#for_side_menu {
width:700px;
margin: 0 auto;
position:relative;
top:67;
}


Also take out the top:67 (no unit specified so isnt serving a purpose at present) and also the position:relative

Regarding the flash, im not sure you are going to be able to line this up exactly with the background image. The image itself is huge (1682pxx5000px) so is scaling itself down to fit the browsers resolution. The resolution of the browser is dictated (i think?) by the resolution of the monitor so may cause problems with the lining up of the flash.

bazz
Aug 18th, 2009, 10:26 AM
To center the top menu, you need to change the width. Currently its set at 100% (meaning stretch itself to be 100% of the browser resolution) so cant be centred.


Yeh he needs that to be the full width and so it doesn't need to be centred. we need to work out how to centre the flash part.
I agree however, that position relative and top:67 need to go.

bazz

noneforit
Aug 18th, 2009, 10:38 AM
I think Centering the flash should be easy enough, stick it inside a Div, give that a fixed width and height and margin: 0 auto; it.

However even once its centered, with his current layout, he will need to change the top margin of this div to line it up with the desktop backgound and I dont think its going to line up 100%?

deafdigit
Aug 18th, 2009, 10:48 AM
Thanks, Laurrieballard - I got the centering to work.

It is, however, very very important that the edges of the for_side_flash line up with the background picture. Before starting this thread (when it all matched in Chrome) I tested the site on three different computers with three different monitor-sizes (19" WS, 17" ws and 21" ws) - everything looked the same. If I risk having trouble with the the looks this way, do you think there is another way to do this? I've seen it done on other pages.
--EDIT--: I've gotten it to line up before. If it's slightly off I'll change the bagground-image, no bigge.

Thanks for your help, Bazz. Here is the current HTML incl. CSS:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>


<html>
<head>
<title>EBR Forside</title>
<style type="text/css">
*{
padding:0;
border:0;
margin:0;
}


body{
background: url(images/baggrundsbillede2.jpg);
}


#for_side_menu {
width:700px;
margin: 0 auto;
}

#for_side_flash {
width:890px;
margin: 0 auto;
}

#for_side_menu object, #for_side_menu embed {
height:40px;
width: 700px;

}


#for_side_flash object, #for_side_flash embed {
width: 890px;
height: 312px;
}
</style>
</head>
<body>


<div id='for_side_menu'>
<object id='flash_object'>
<param name="movie" value="flash/forsidemenu.swf" />
<param name="wmode" value="transparent" />
<embed src="flash/forsidemenu.swf" wmode="transparent">
</embed>
</object>

</div>
<div id='for_side_flash'>
<object>
<param name="movie" value="flash/forsideflash.swf" />
<embed src="flash/forsideflash.swf">
</embed>
</object>
</div>
...
</body>
</html>

As mentioned above, I got the centering to work, so all I really need now is to have it all match the lines of the background-image.

I appreciate your help, as always.
//deaf_digit

noneforit
Aug 18th, 2009, 11:44 AM
The flash element appears to be nested within the #for_side_flash div. As it has margin:0 auto; .....im asssuming it centers ok?

If so, could just change the top margin until it lines up with the background

bazz
Aug 18th, 2009, 11:48 AM
have you got a link to a live page?

I know I asked for the html but I forgot that I wouldn't have your imaging included. :(

If you have a link to the page it would be much easier coz I can play about with the css in the browser.

bazz

deafdigit
Aug 18th, 2009, 03:00 PM
The live page is at:
http://www.hornskovvindberg.dk/advoboweb/ebr/
I've removed the HTAccess temporarily.

As you will notice, I've added some top-margin:ypx;-stuff to align it all. It is now alligned in Chrome, but yet again it's 10-12 px off in IE and FF. I really hope you come up with some genious idea, I've missed :)

bazz
Aug 18th, 2009, 03:37 PM
I changed your css and in FF it is fine. what you need to remember is that the big pictuire (with the bloke in it) has a top edge of about 20px, which is the same colour as the background. That may cause you troubles in the others browsers.




*{
padding:0;
border:0;
margin:0;
}


body{
background: url(images/baggrundsbillede2.jpg);
}


#for_side_menu {
width:700px;
margin: 0 auto;
margin-top:52px;
}

#for_side_flash {
width:890px;
margin: 25px auto;
}

#bund_flash {
width:900px;
margin: 0 auto;
}

#for_side_menu object, #for_side_menu embed {
height:40px;
width: 700px;

}

#for_side_flash object, #for_side_flash embed {
width: 890px;
height: 312px;
}

#bund_flash object, #bund_flash embed {
width: 900px;
height: 100px;
}




try that css as a complete replacement for what you have and see if it works OK in IE and the others. (don't forget to backup what you have now so if I am wrong, you won't have lost it all ).
I have highlighted the changes in red.
bazz

bazz
Aug 18th, 2009, 03:43 PM
You may want the nav menu in a sifferent place and I just found out that the two margin measurements should add up to 77px.

Try it and see with 50px and 27px.



#for_side_menu {
width:700px;
margin: 0 auto;
margin-top:50px;
}

#for_side_flash {
width:890px;
margin: 27px auto;
}


or 60 and 17 or 70 and 7.

bazz

deafdigit
Aug 18th, 2009, 04:52 PM
Yeah it's perfectly alligned in FF now, but it's about 1 px too high up in IE, and 5-6 px in Chrome. Still... it's better this way than before ;)

Would it be better to make the flash only contain the bloke and then have transparent background?

//deaf_digit

bazz
Aug 18th, 2009, 05:09 PM
I don't think I would be using an image for the background in that way. I think I would try placing my div with a black background and a green border and have the flash extending upwards since the top of it is the lighter bg color.

bazz

Scriptet
Aug 19th, 2009, 05:13 PM
I think the way the flash was embedded seems to be causing the inconsistencies with the current setup.

Here try this:


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>


<html>
<head>
<title>EBR Forside</title>
<style type="text/css">
body{
background: url('http://www.hornskovvindberg.dk/advoboweb/ebr/images/baggrundsbillede2.jpg');
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}


#for_side_menu {
width:700px;
margin: 0 auto;
margin-top:57px;
}

#for_side_flash {
width:890px;
margin: 0 auto;
margin-top:25px;
}

#bund_flash {
width:900px;
margin: 0 auto;
}

#content { width:890px; margin:0 auto; }
#content p{ margin:0; padding:10px;}
#content .vidimg{ float:left; margin-bottom: 100px; }
</style>
</head>
<body>
<div id='for_side_menu'>
<object width="700" height="40" type="application/x-shockwave-flash" data="http://www.hornskovvindberg.dk/advoboweb/ebr/flash/forsidemenu.swf">
<param value="http://www.hornskovvindberg.dk/advoboweb/ebr/flash/forsidemenu.swf" name="movie" />
<param name="wmode" value="transparent" />
</object>
</div>

<div id='for_side_flash'>
<object width="890" height="312" type="application/x-shockwave-flash" data="http://www.hornskovvindberg.dk/advoboweb/ebr/flash/forsideflash.swf">
<param value="http://www.hornskovvindberg.dk/advoboweb/ebr/flash/forsideflash.swf" name="movie" />
</object>
</div>

<div id='bund_flash'>
<object width="900" height="100" type="application/x-shockwave-flash" data="http://www.hornskovvindberg.dk/advoboweb/ebr/flash/bundbillede.swf">
<param value="http://www.hornskovvindberg.dk/advoboweb/ebr/flash/bundbillede.swf" name="movie" />
</object>
</div>

<div id="content">
<img src="http://www.hornskovvindberg.dk/advoboweb/ebr/images/video1.jpg" alt="video" width="300" class="vidimg"/>
<b>Mit navn er Erik Bo Rasmussen og jeg vil gerne være din forsvarer!</b>
<br><br><br>

<p>Hvis du er mistænkt, sigtet eller tiltalt i en straffesag har du bestemt brug for min hjælp som forsvarer.</p>
<p>Uanset om du er skyldig eller uskyldig.
Hvis du er uskyldig er det et ”must” at du frifindes.<br>
Jeg medvirker ikke til justitsmord.</p>

<p>Jeg er ikke sammenspist med politi eller anklagemyndighed.
Jeg er uafhængig af domstolene.
Jeg har kun én opgave og kun én interesse:</p>
<p>At være din forsvarer og kæmpe din sag, fra først til sidst, uanset om du er skyldig eller uskyldig.<br>
Og skulle du blive dømt for kriminalitet, du har begået, er det min opgave at sikre, at du får den mildeste straf af alle.</p>

<b>På denne hjemmeside kan du se, høre og læse mere om mit virke som forsvarer.</b>
</div>
</body>
</html>

It looks the same for me in FF and IE, haven't got Chrome to test.

Note you have an issue where your flash will never match the background because of the way it has been created. If you look on the first image of your slideshow it is about 1 pixel out, however on the second image it lines up (at the top only, not the bottom), meaning that the slideshow has inconsistent backgrounds. So you need to change your background image and flash to make sure they can align exactly.

I changed your flash embed to a different method (this might not be the best i don't experiment with embedding flash much), and also removed your table from the bottom.

bazz
Aug 19th, 2009, 05:19 PM
haven't we just brought him back to non-semantic html. dimensions should not be the page.

I agree about the flash and the background image. If he had those sorted out, the page should look fine, I think with the earlier code.

bazz

Scriptet
Aug 19th, 2009, 07:00 PM
Yes sorry I should have put the dimensions inside the CSS, I was playing around with different techniques to correctly embed flash, and they have them in the HTML so I accidently left them in.

Anyway agreed the page will look fine with the earlier code if he changes his flash embed style, and background of the flash/background image.