homepage Welcome to WebmasterWorld Guest from 54.227.215.139
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Getting cross browser Utopia
getting dynamic text to stay put!
PHP_Idiot

5+ Year Member



 
Msg#: 4362392 posted 2:43 pm on Sep 14, 2011 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4362392 posted 3:43 pm on Sep 14, 2011 (gmt 0)

<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

5+ Year Member



 
Msg#: 4362392 posted 3:57 pm on Sep 14, 2011 (gmt 0)

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

5+ Year Member



 
Msg#: 4362392 posted 4:00 pm on Sep 14, 2011 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4362392 posted 9:04 pm on Sep 14, 2011 (gmt 0)

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

5+ Year Member



 
Msg#: 4362392 posted 9:43 pm on Sep 14, 2011 (gmt 0)

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

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4362392 posted 7:12 am on Sep 16, 2011 (gmt 0)

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

5+ Year Member



 
Msg#: 4362392 posted 9:34 am on Sep 16, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved