PDA

View Full Version : Style Sheet help por favor!

BOAC
13th November 2008, 14:20
Fiddling with CSS (at MY age!) and I have discovered that while the 'kindly/forgiving' IE displays the images here exactly where I want them, FireFox really messes them up!

Can anyone possibly throw any light on this, please?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
img.leftimg {position:absolute;
top: 10%;
left: 5%;
width=200px
height=300px
}
img.midimg {position:absolute;
top: 10%;
left: 40%;
width=200px
height=300px
}
img.rightimg {position:absolute;
top: 10%;
left: 75%;
width=200px
height=300px
}
img.4thimg {position:absolute;
top: 65%;
left: 40%;
width=200px
height=300px
}
</style>
</HEAD>
<BODY>
<img class="leftimg" src="Image1.jpg" alt="">
<img class="midimg" src="Image2.jpg" alt="">
<img class="rightimg" src="Image3.jpg" alt="">
<img class="4thimg" src="Image4.jpg" alt="" >
</BODY>
</HTML>


LH2
13th November 2008, 17:50
Your problem is that one of your class selector names starts with a digit. Change it to something else, e.g., "4thimg" -> "fourthimg".

I don't think the syntax for valid class selector names is part of any CSS specification, either explicitly or by inference, but generally speaking starting identifiers with a digit is not a brilliant idea, tends to throw off the parsers.
BOAC
13th November 2008, 18:02
LH - ta for that - sorted! Many thanks.:ok:
LH2
13th November 2008, 18:08
Perhaps you could post a screenshot or something showing where you want them to be?

From reading your code, I would expect to see something like:

...[IMG1].....................[IMG2]..................................[IMG3]

.................................[IMG4]



Is that correct?
BOAC
13th November 2008, 18:13
Sorry - discovered 'finger trouble' and edited my previous while you posted. NOT QUICK ENOUGH:)
LH2
13th November 2008, 18:16
Finger trouble on my previous too... must be the weather
BOAC
7th December 2008, 12:28
Back again for help, please!

Quite proud, I was, of the photo gallery I created with help here for a local outfit. BUT I realised that having the image sizes in pixels would cause havoc with different screen resolutions. SO I rewrote the page in %. Now I find that in Firefox all the text labels I have inserted below the images (using div class) are spot on, in IE they have shifted. Given that IE is 'faulty' and FF is supposed to be 'correct', is there some code I can insert which will fix positions in both browsers?

Ideas so far that have not worked from Googling:

html,body {height:100%; width:100%}

display:inline
Gertrude the Wombat
7th December 2008, 12:50
Not enough information.

Generally, to position things relative to each other and then position the combined units where you want them, that sort of thing, you end up with far more levels of nested divs and spans than you would originally have dreamed possible.

And whilst the anti-Microsoft religious nutters would have you believe Given that IE is 'faulty' and FF is supposed to be correct'
without question, if you actually play with this stuff for long enough you'll find that Firefox has plenty of bugs on its own, the standards have plenty of missing and unspecificed and ambiguous features, and that actually the easiest and best way to get a decent effect is to write IE specific code and insists on the user using IE ... only works for intranet applications though, out on the wild wild web you can't get away with that and have to downgrade your expectations.
BOAC
7th December 2008, 13:02
Damn! I thought I had found the answer to the tables nightmare too!

Here is an example (bits only):

html,body {height:100%;width:100%}
img.topleft {position:absolute;
top:8%;
left:5%;
width:27%;
height:32%;
}

DIV.topleft {position:absolute;
font-style: italic;font-size: 12pt;
top:40%;
left:5%;
width:28%;
height:30%;
font-weight: 300
display:inline
}

<img class="topleft" src="Image1" alt="">
<img class="topmid" src="Image2" alt="">
<img class="topright" src="Image3" alt="">
<img class="bottomleft" src="Image4" alt="" >
<img class="bottommid" src="Image5"" >
<img class="bottomright" src="Image6"" >
<DIV class="topleft">text1
<DIV class="topmid">text2
<DIV class="topright">text3
<DIV class="bottomleft">text4
<DIV class="bottommid">text5
<DIV class="bottomright">text6

etc
groundbum
7th December 2008, 14:09
in actual fact going back to the very very very early internet, HTML was designed to stop the designer from getting too picky about HOW the information would be presented to the reader. The intent of HTML is to make the information, eg train times, weather forecast etc, available to the users web browser. It is then up to the web browser to decide how to format the content in the best possible way.

So all this trying to get the design down to the nTH degree is actually very naughty and akin to swimming upstream.

It's a bit like separating data and logic...

G
BOAC
7th December 2008, 14:58
Yes, but has the world not turned a time or two since then? Why CSS? I enjoy being 'naughty' too!
dusk2dawn
7th December 2008, 16:38
Never used a stylesheet but "" as you used them in the end of these two lines are uncommon in any high-level language:
<img class="bottommid" src="Image5"" >
<img class="bottomright" src="Image6"" >
Gertrude the Wombat
7th December 2008, 20:28
big rule broken here
Wrong.

This week's politically correct way of looking at it is:

(1) Content should be in HTML.
(2) Layout, down to the pixel if you like, should be in CSS.
(3) Behaviour should be in JavaScript (or whatever).
(4) The three aspects should be in different files.

So really the only thing wrong with the example (from the politically correct little hitler point of view) is that the CSS is in <script> tags rather than a separate file.

(This theory doesn't of course work, because the standards are inadequate, and each browser chooses a different way to make up for the inadequacies of the standards, so in real life you end up with horrible fudges all over the place.)
BOAC
8th December 2008, 08:57
d2d - slip of the keyboard! Should have shown alt=""

Gertrude (mein fuhrer:)) - done that way as I have varying layout needs and cannot write a 'comprehensive' external style sheet, but prefer to adjust each page based on a master page. Forgiveness begged. :) All other points :ok:

For all, in case anyone else has the problem, sorted by adding

<div style="height:100%; width:100%;"></div> above

<DIV class="topleft">text1
<DIV class="topmid">text2
Courtesy of Experts' Exchange experts.

All down to a mis-interpretation of 'positions absolute and fixed' by IE 5 and 6, but apparently 7 is ok.

Regarding GtW's last para - isn't it time this was sorted?:ugh: Can we safely assume that 'CSS Validator' is reliable and correct?