473,785 Members | 2,987 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS looks different in FF

Hello

I have made a web page which contains styles and templates
Here is a style:
A:link{
color: brown;
}
#template-01 {
position:absolu te;
left:0px;
top:0px;
width:760px;
height:212px;
background-image: url(img/template_01.jpg );
}

#template-02 {
position:absolu te;
left:0px;
top:212px;
width:202px;
height:69px;
text-align: center;
background-image: url(img/template_02.jpg );
}

#template-03 {
position:absolu te;
left:202px;
top:212px;
width:558px;
height:483px;
overflow:auto;
font-family: Monotype Corsiva;
font-size: 18px;
text-align: justify;
background-image: url(img/template_03.jpg );
}

#template-04 {
position:absolu te;
left:125px;
top:281px;
width:23px;
height:419px;
background-image: url(img/template_04.jpg );
}

#template-05 {
position:absolu te;
left:148px;
top:281px;
width:113px;
height:27px;
background-image: url(img/template_05.jpg );
}

#template-06 {
position:absolu te;
left:261px;
top:281px;
width:66px;
height:60px;
background-image: url(img/template_06.jpg );
}

#template-07 {
position:absolu te;
left:148px;
top:308px;
width:113px;
height:33px;
background-image: url(img/template_07.jpg );
}

#template-08 {
position:absolu te;
left:148px;
top:341px;
width:144px;
height:30px;
background-image: url(img/template_08.jpg );
}

#template-09 {
position:absolu te;
left:296px;
top:341px;
width:35px;
height:359px;
background-image: url(img/template_09.jpg );
}

#template-10 {
position:absolu te;
left:148px;
top:371px;
width:144px;
height:27px;
background-image: url(img/template_10.jpg );
}

#template-11 {
position:absolu te;
left:148px;
top:398px;
width:144px;
height:302px;
background-image: url(img/template_11.jpg );
}
..tytul{
text-align: center;
}
..podtytul{
text-indent: 5%;
margin: 3%;
}
..email{

}
td{
text-align: center;
}
#info{
text-align: left;
}
p{
margin: 3%;
text-indent: 5%;
font-size: 20px;
}
..red{
color: red;
}
img{
border: none;
}

table{
text-align: center;
border: none;
}

and here is a template code:

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Pracowni a Lamp i Witra¿y Artystycznych</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/>
<!-- ImageReady Styles (template.psd) -->
<link href="style.css " rel="stylesheet " type="text/css"/>
<!-- End ImageReady Styles -->
</head>
<body style="backgrou nd-color:#996600; margin-top: 0px; margin-bottom: 0px;
margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (template.psd) -->
<div id="template-01">
</div>
<div id="template-02">
<table cellspacing="5" >
<tr><td><a href="?l=pl"><i mg src="img/pl.gif" alt=""/></a></td><td><a
href="?l=en" alt=""><img src="img/gb.gif" alt=""/></a></td><td><a
href="?l=de"><i mg src="img/de.gif" alt=""/></a></td></tr>
</table>

</div>
<div id="template-03">

<p>{$tekst}</p>

</div>
<div id="template-04">

</div>
<div id="template-05">
<a href="glowna.ph p"><img src="img/template_05{$je zyk}.jpg" width="113"
height="27" alt=""/></a>
</div>
<div id="template-06">

</div>
<div id="template-07">
<a href="oferta.ph p"><img src="img/template_07{$je zyk}.jpg" width="113"
height="33" alt=""/></a>
</div>
<div id="template-08">
<a href="informacj e.php"><img src="img/template_08{$je zyk}.jpg" width="144"
height="30" alt=""/></a>
</div>
<div id="template-09">

</div>
<div id="template-10">
<a href="kontakt.p hp"><img src="img/template_10{$je zyk}.jpg" width="144"
height="27" alt=""/></a>
</div>
<div id="template-11">

</div>
<!-- End ImageReady Slices -->
</body>
</html>

adress of a site is www.bakula.eu

And the problem:
In IE everything displays OK (excepting one thing) but in FF two images
aren't displayed at all - template-01 and template-03. The div size is equal
to background image sizes. I've also noticed that on my local server (on
linux and windows sytem) everything is ok, this problem is only on a remote
server. Another annoying (the "one thing" shows above) thing is that long
unexpecting horizontal line which only appears on a remote server. I don't
know what to do
Remote server is php 4 on linux machine with php 4.4.x
I have used this kind of programming many times (div and background-images)
many times - without problems
Any suggestions ?
Thank you

Apr 13 '06 #1
6 1924
Micha³ wrote:
Hello

I have made a web page which contains styles and templates [snap]
adress of a site is www.bakula.eu

And the problem:
In IE everything displays OK (excepting one thing) but in FF two images
aren't displayed at all - template-01 and template-03. The div size is
equal to background image sizes. I've also noticed that on my local
server (on linux and windows sytem) everything is ok, this problem is
only on a remote server. Another annoying (the "one thing" shows above)
thing is that long unexpecting horizontal line which only appears on a
remote server. I don't know what to do
Remote server is php 4 on linux machine with php 4.4.x
I have used this kind of programming many times (div and
background-images) many times - without problems
Any suggestions ?
Thank you


1) Your code does not validate. That's a good starting point for
troubleshooting . For instance a link element cannot be part of any XHTML
page.

2. Things that don work on server #1 but do on server #2 may indicate:
-Improper use of relative/absolute paths in your code
-(Un)availabilit y of required bits of code, images, php snippets etc.
-User rights issues (*nix)
-Different PHP config. Some functions may be disallowed, safe_mode
restrictions, register_global s and the like can make a difference

3. Your code isn very legible. Meaningless div names don´t help me
understand easily what is going on. I always prefer English meaningful
stuff. From first glance it seems it's quite a complicated way of
achieving rather straightforward stuff. Is this auto-generated code by
some program ? The way you set up the "menu" with absolute positioning
doesn't look easy to maintain/change. Why don't you go for an unlinked
list in one div, and use floats to line it all up properly?

4. Try to avoid making your pages for IE first and then fix them for
other browsers. I prefer aiming at FF/Mozilla and then 'repair' for IE
afterwards. IE is the odd one out. also good to start with setting the
default margins and padding to 0, since browsers have different
defaults. * -or- body {margin : 0; padding 0;} is a good first css entry.

5. I see the use of non-common font-family in template-03. Are these 2
fonts or should these be in quotes? It helps having a fallback font like
serif, sans-serif supported by any browser.

6. Do empty divs display in CSS-compliant browsers? I dunno. And the
{$tekst} PHP construct, does it actually expand to real text in your
code ? (same for other vars in the code in your post.

HTH
Sh.
Apr 13 '06 #2
Schraalhans Keukenmeester wrote:
4. Try to avoid making your pages for IE first and then fix them for
other browsers. I prefer aiming at FF/Mozilla and then 'repair' for IE
afterwards. IE is the odd one out.


As a commentary on that:

I found that when I design for IE, and change to fit FF, I have a lot
more work to do than if I design for FF and fix for IE.

So I do exactly as suggested now...
Apr 13 '06 #3
Schraalhans Keukenmeester wrote:

(...)

Thank you very much for your fast and very helpful answer
After very big number of attempts I have recognized that filesizes of my
local jpegs and remote are different exactly in the files that aren't
displaying properly. I don't know what may happened but probably my
computer has hanged on due file transmission. Maybe there is some
misunderstands between Windows ftp clients and Linux operating systems ?
Some time ago I had similar problem - before transmission a flash file
to remote server I had to clear my cache in browser. If no - flash file
didn't display properly. Very strange..
I always check my sites in Firefox at first, but on my local machine
there is no problem - files weren't corupt. IE has displayed these
corupt images without few lines - it was that annoying horizontal brown
line. Firefox hasn't diplayed these images at all. So it was no css
problem but corrupt image problem.
And about strange style of my programming. First - I prepare a template
file in Photoshop, then divide it into slices, save it as jpegs and css
file. After it I make a php mechanism and divides html code and php code
with Smarty - it is the explanation of strange variables in html code.
Can you advice me a better way to prepare pretty and valid websites?

Thank you
Apr 13 '06 #4
Schraalhans Keukenmeester wrote:
For instance a link element cannot be part of any XHTML
page.


Why not?
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
Apr 13 '06 #5
On Thu, 13 Apr 2006 17:32:33 +0200, Michał <mi************ *@xl.wp.pl>
wrote:
I have made a web page which contains styles and templates Here is a style: <snip css>
and here is a template code: <snip markup>

That was both very unnecessary since you also post this: adress of a site is www.bakula.eu And the problem:
In IE everything displays OK (excepting one thing) but in FF two images
aren't displayed at all - template-01 and template-03. The div size is
equal to background image sizes. I've also noticed that on my local
server (on linux and windows sytem) everything is ok, this problem is
only on a remote server. Another annoying (the "one thing" shows above)
thing is that long unexpecting horizontal line which only appears on a
remote server. I don't know what to do


I think the real problem here might be that you try to position a pixel
perfect design, in addition, a design specifically designed for IE. 'CSS
looks different in FF' should have read 'CSS looks different in IE'. Don't
design for IE. And don't desing pixel perfect.

If you design fluid or liquid using FF and Opera next to eachother for
example, you can be almost certain your design 'works' in many modern
graphical browsers. After that liquid design is created, validate both
markup and css, correct the wrongs and then tweak it with a few simple
hacks (mostly positioning or dimensions or both) for IE (if you start the
selector with [* html] only IE will read the styles; you have to accept
the fact that you have a few mistakes in you stylesheet then).
--
______PretLette rs:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Apr 13 '06 #6
Micha³ wrote:
Schraalhans Keukenmeester wrote:

(...)

Thank you very much for your fast and very helpful answer
After very big number of attempts I have recognized that filesizes of my
local jpegs and remote are different exactly in the files that aren't
displaying properly. I don't know what may happened but probably my
computer has hanged on due file transmission. Maybe there is some
misunderstands between Windows ftp clients and Linux operating systems ?
Some time ago I had similar problem - before transmission a flash
file to remote server I had to clear my cache in browser. If no - flash
file didn't display properly. Very strange..
I always check my sites in Firefox at first, but on my local machine
there is no problem - files weren't corupt. IE has displayed these
corupt images without few lines - it was that annoying horizontal brown
line. Firefox hasn't diplayed these images at all. So it was no css
problem but corrupt image problem.
And about strange style of my programming. First - I prepare a
template file in Photoshop, then divide it into slices, save it as jpegs
and css file. After it I make a php mechanism and divides html code and
php code with Smarty - it is the explanation of strange variables in
html code.
Can you advice me a better way to prepare pretty and valid websites?

Thank you

There are plenty good tutorials online on how to get your pages to look
nice and clean. I found this site a good start, The 'Selectutorial'
shows the construction of a simple page step by step, and allows you to
view the result of each step: http://css.maxdesign.com.au/selectutorial/

A useful extension on Firefox is Web Developer. It allows you to see all
kinds of info on your page, and makes it possible to edit your html and
css live! See your pages change while you type!
https://addons.mozilla.org/addon.php?id=60

I generally start with a page in a development environment like Quanta++
(On linux). On Windows I used the simple ConTEXT text editor, no fancy
IDE. (Freeware). I only do the brushing up/corrections in Web Developer/FF

Then I use a freeware utility called Tidy to clean up my HTML so it fits
W3C standards/recommendations . Finally I have the result code validated
by online tools like www.htmlhelp.com/tools/validator/ and
validator.w3.or g/

http://www.chami.com/html-kit/ has a free application that allows the
w3c check from within the app.

To be honest, I don't have much faith in HTML/CSS generation by
ImageReady, Photoshop and what have you. I have tried Adobe GoLive! for
a while, but the code it generates is messy, if not flawed. Frontpage is
too much IE-oriented.

So all things considered, I still believe writing your own (x)html is
the way forward. Tidy does most of my code correction and indentation.

Have fun, good luck and you're welcome!
Sh.
Apr 14 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

53
6466
by: Paul Rubin | last post by:
I've been approached about writing a Windows app which will need a really professional looking GUI. Forget TKinter, this has to actually look good (real artists will be available to get the visual stuff right). Assuming I write in Python, what's the best toolkit to use? Some cost in implementation pain is tolerable if the finished interface looks better as a result. It would be nice if the toolkit runs on multiple platforms rather than...
21
2818
by: Applebrownbetty | last post by:
Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a completely CSS positioned page, and was wondering if any resident CSS guru might quickly be able to find the problem(s). Thank you. In IE, the page looks how I want it to look (picture below): www.sunbadgeco.com/sunmetal/ie.jpg In Mozilla Firefox, somehow it's not quite right (pic below): www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
8
1923
by: G Patel | last post by:
Can people please comment on the layout/style of my problem? The major issue I had was the layout. I ended up having to put a relatively large switch statement, inside an if statement, which is inside a while loop. If someone can tell me how I can rearrange these elements a little to make it cleaner, I would appreciate that. I've tested it on the command line, and it works *well*, but the source code layout is bugging me. I'd also...
3
2404
by: Rachel Suddeth | last post by:
This may not be the right forum, but it's a problem I chiefly come across when trying to post here. When I do a copy/paste from VS, the text always looks really weird (and even if I'm in an editor that's supposed to be doing plain text, it looks like it's in a different font -- and of course you can't change the font in a plain text editor.) Then when it gets converted to actual plain text, there is a blank line stuck in between every...
10
1994
by: ashkaan57 | last post by:
The web site is in two languages, one in English and the other in Farsi (Persian) which is a right-to-left language. So, I used two stylesheets, with the same info, and changed the right and left properties (i.e. the left-margin:20px in English version changed to right-margin:20px in farsi version). It works fine in IE in both languages. In Mozilla, the English version works fine but the Farsi version looks crooked. the menu and everything...
6
1091
by: eransha | last post by:
Hello, I have created a UserControl in c#, and put it inside a web page. The control contains a listbox and a button. For some reason the control looks different when I use it on a "normal" form (windows application) than it looks when used within a webpage. For example the button loses its 3D look. Can anyone explain this behavior? (I'm using IE 6 the ASP page is using ..net 2.0).
2
3289
by: johnny15 | last post by:
My website www.windsoraccess.co.uk looks different in IE to Firefox at the very top where my logo and wording is. In IE the gap surrounding the logo and wording is much less and looks absolutely fine compare to the view you get in Firefox. Elsewhere there is no problem with the layout it looks the same in both IE and Firefox. Any suggeestion would be welcome. Thanks in advance
3
2500
by: Ryan Liu | last post by:
Hi, I have a big urgent problem to solve. I used to use Windows 2000 Chinese version, now I installed Windows XP (English) system. The problem is not about 2000 or XP, it is about English and Chinese. All forms of my compiled C# desktop application, as well as in Visual Studio
1
1219
by: allj | last post by:
Hope you had a good Thanksgiving!! I am stumped. I am trying to make a query that looks like the report with different groupings but one that is exportable to a delimited txt file. In my case a header of several fields a body of continuous records and a trailer of footer. I then need to export it to delimted txt with the separator being *. A simplified version would be like this: The header is Mdb*x432*date*>* The detail is a loop with rcds...
0
9645
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10327
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10151
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10092
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9950
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5381
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4053
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3647
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2879
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.