1. Home
  2. Forums Index
  3. Browser Side / CSS 1:06 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Getting cross browser Utopia

getting dynamic text to stay put!

         

PHP_Idiot

2:43 pm on Sep 14, 2011 (gmt 0)

10+ Year Member



Hi Folks

I've recently started to completely rebuild my non-validating non-cross browser compatible site (it was my first!)

I've learnt a lot but I'm still struggling to get I part of the page to display correctly in FFox, IE & Chrome (don't have safari to test on there yet).

At the moment the new template site displays best IE.

I have a php script that collects the last five results and pops then into the <li> of an <ul> This is done with the following script as an include: 

<?php ini_set('arg_separator.output','&amp;'); 
 include 'includes/open_db.php'; 

$BeginDate = '2010-07-01';

$EndDate = '2015-04-01';

$recentresults = "SELECT Results.Date, date_format(Date,'%e/%c/%Y') as dates, Venue.gamenight1, Player.FirstName, Player.lastname, Venue.VenueName, Venue.VenueID
FROM Results, Player, Venue
WHERE position =1
AND Results.MembershipNo = Player.MembershipNo
AND Venue.VenueID = Results.VenueID
AND Results.Date
BETWEEN '$BeginDate' AND '$EndDate'
ORDER BY date DESC 
LIMIT 0 , 5";

$result1 = mysql_query($recentresults) or die("Couldn't execute query because: ".mysql_error());

$pos=1;

while($r = mysql_fetch_array($result1)){
//and echo each new row

echo <<<html
<li><a href="venueResult.php?Date={$r['Date']}&amp; VenueID={$r['VenueID']}">{$r['FirstName']} {$r['lastname']} won at {$r['VenueName']} on {$r['dates']}</a></li>

html;
$pos++;}
?>


This is run in the html via this: 

<div id="recent_results">
 <ul><?php include 'includes/recentresults.php'; ?>
 </ul>
 </div>


and is controlled by the CSS as follows: 

#recent_results {
 background: url("../images/black/images/recent_results.gif") no-repeat scroll 0 0 transparent;
 font-size: 11px;
 font-weight: bold;
 height: 220px;
 padding: 15px 0 0 0;
 text-align: center;
 width: 221px;
}
#recent_results ul {
 height: 13px;
 list-style: none outside none;
 padding: 14px 0 0 9px;
}
#recent_results ul li {
 background: url("../images/black/images/recent_results_box.gif") no-repeat scroll 0 0 transparent;
 height: 30px;
 padding: 5px 0 3px 20px;
 width: 165px;
}
#recent_results ul li a {
 color: #FFFFFF;
 font-family: arial;
 line-height: 11px;
 padding: 0 10px 0 0;
 text-decoration: none;
}


The Big question is where the hell am I going wrong in getting a consistant display across the browser?
If anyone can point me in the right direction I would be hugely greatful!
Cheers

[edited by: alt131 at 7:35 pm (utc) on Sep 14, 2011]
[edit reason] Thread Tidy [/edit]

rocknbil

3:43 pm on Sep 14, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<applause for even caring about validation>

This will lead you to cross browser compatibility.

But, if I may ask, exactly what is going wrong? :-)

What you have there should be valid, the only suggestion is you don't really need the containing div and can apply your styles to the ul itself (which can't possibly be the problem.)

What sticks out immediately:

#recent_results {
...
height: 220px;
...
}

This will conflict with "dynamic" content. What if the lines are long? Or short? You probably want this to "float" with the content. Remove it?

#recent_results ul {
...
height: 13px;
...
}

I'm visualizing 5 results fitting in a 13px height. Fail!: ;-) Try removing it . . . unless the links are horizontal (li=display:inline or floated) doesn't seem like this is needed.

#recent_results ul li {
...
height: 30px;
...
}

This one is probably OK . . . but do you need it?

PHP_Idiot

3:57 pm on Sep 14, 2011 (gmt 0)

10+ Year Member



Thanks for your comments, let me explain a little further..
The background image is held in a div, then there are 5 other divs within this with different backgrounds, the content I'm adding to these area must fit within the constraints of that div, so the text does not flow outside the background image. This shouldn't be a problem as all the text comprises of is 'Name' won at 'location' on 'date' so they are all very similar in length.
Have a look at www.gbpokerclub.co.uk/TEMPLATE/index_template.php and you should hopefully see what I mean.

For some reason in the different browsers it displays line spacing differently and therefore goes beyond the background image I'm trying to keep it in.

I Hope that makes sense!

PHP_Idiot

4:00 pm on Sep 14, 2011 (gmt 0)

10+ Year Member



Oh forgot to mention the 5 results should each fit in their own 30px <li> :)
5 results, 1 <ul>, 5 <li>

The 13px height was ...erm! dunno how that got there really, removed it but nothings changed!

lucy24

9:04 pm on Sep 14, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



For some reason in the different browsers it displays line spacing differently and therefore goes beyond the background image I'm trying to keep it in.

Tralala it's a Fonts Issue.

Well, maybe. Start by making sure that your boilerplate CSS includes a default line-height. I use 1.2 for ordinary text-- paragraphs, lists etc. More comfortable to read than 1 (100%, "normal" etc), and doesn't create ugly hiccups if you happen to need a sub- or superscript.

Set your font size in px and the line height in ems. If the only thing you've set is a line height in pixels, it can be overridden by the font size. I can't find a font size in your CSS, so it's falling back on user default. This will almost certainly be too large, since your ordinary user default is a serif font that "reads" smaller than Arial at the same point size. Try to treat font-name and font-size as a package: if you've declared a name, be sure to declare a size. (Size by itself is OK if you're nesting elements.)

Since it's just a few words you can constrain the font more narrowly than if it were large masses of text. But always include a generic backup, in this case "sans-serif".

PHP_Idiot

9:43 pm on Sep 14, 2011 (gmt 0)

10+ Year Member



Has anyone told you that your a genius recently Lucy?
Problem solved, thanks a million :D

alt131

7:12 am on Sep 16, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi PHP_Idiot, and welcome to css :)
Has anyone told you that your a genius recently Lucy?
Not lately PHP, and saying so seems to have made her lost for words - never thought I'd see the day ;) ~waves to Luce~
Pleased you got a solution, and thanks for reminding us Lucy's our resident whiz on fonts.

PHP_Idiot

9:34 am on Sep 16, 2011 (gmt 0)

10+ Year Member



lol, well, I'm sure this won't be my last question here!
Thanks for the warm welcome ;)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:06 pm May 1, 2026