The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
Hey, for the past few weeks I have been redesigning my entire website to use CSS for layout and text styles, which is quite a challenge seeing as previously it was all DreamWeaver (or Frontpage for older pages...) generated HTML...
[URL] http://www.unitepunk.co.uk/interviews/hfs.htm [/URL]
This is the page for one of the interviews on the site. If you check it out in Internet Explorer it looks as I want it, with no gaps between different peoples speech except when a new question is asked.
In FireFox however, for some reason the 'left' and 'right' divs (used to contain the speakers name and what they say respectively) seem to have top and bottom padding... Now I have tried setting the top and bottom padding to 0px explicitly, but this doesn't have any effect.
The white, red and blue borders are just so people can see what's going on... The white border is around the 'q' divs, which contain the 'left' and 'right' divs. 'left' divs are red, and 'right's are blue.
Any help appreciated!
[EDIT] - btw, [URL] http://www.unitepunk.co.uk/css/interviews.css [/URL] for the CSS.
[URL] http://www.unitepunk.co.uk/interviews/hfs.htm [/URL]
This is the page for one of the interviews on the site. If you check it out in Internet Explorer it looks as I want it, with no gaps between different peoples speech except when a new question is asked.
In FireFox however, for some reason the 'left' and 'right' divs (used to contain the speakers name and what they say respectively) seem to have top and bottom padding... Now I have tried setting the top and bottom padding to 0px explicitly, but this doesn't have any effect.
The white, red and blue borders are just so people can see what's going on... The white border is around the 'q' divs, which contain the 'left' and 'right' divs. 'left' divs are red, and 'right's are blue.
Any help appreciated!
[EDIT] - btw, [URL] http://www.unitepunk.co.uk/css/interviews.css [/URL] for the CSS.
Pandaemonium wrote:
> Tyla wrote:
> Use * with care. THis is a universal selector and will apply this to
> everything in your site unless over ridden in another declaration.
>
> Yup. Wildcard. I've never had a problem with it. :D
I haven't "yet" either, but you do have to remember about it when something throws a wobbler. Normally use it for fonts across the body.
> Tyla wrote:
> Use * with care. THis is a universal selector and will apply this to
> everything in your site unless over ridden in another declaration.
>
> Yup. Wildcard. I've never had a problem with it. :D
I haven't "yet" either, but you do have to remember about it when something throws a wobbler. Normally use it for fonts across the body.
Tyla wrote:
> Use * with care. THis is a universal selector and will apply this to
> everything in your site unless over ridden in another declaration.
Yup. Wildcard. I've never had a problem with it. :D
> Use * with care. THis is a universal selector and will apply this to
> everything in your site unless over ridden in another declaration.
Yup. Wildcard. I've never had a problem with it. :D
Pandaemonium wrote:
> I'd personally add: -
> *{
> margin: 0px;
> padding: 0px;
> }
Use * with care. THis is a universal selector and will apply this to everything in your site unless over ridden in another declaration.
> I'd personally add: -
> *{
> margin: 0px;
> padding: 0px;
> }
Use * with care. THis is a universal selector and will apply this to everything in your site unless over ridden in another declaration.
Pandaemonium wrote:
> I'd personally add: -
> *{
> margin: 0px;
> padding: 0px;
> }
AHA! Somehow that worked!
On further experimentation I have discovered setting the margin and padding to 0px in the text styles (p and h3) used in the left and right divs fixed the problem! It seems FireFox was setting a default padding/margin around the text contained in these divs!
Sweet. Thanks to both of yous!
:D
> I'd personally add: -
> *{
> margin: 0px;
> padding: 0px;
> }
AHA! Somehow that worked!
On further experimentation I have discovered setting the margin and padding to 0px in the text styles (p and h3) used in the left and right divs fixed the problem! It seems FireFox was setting a default padding/margin around the text contained in these divs!
Sweet. Thanks to both of yous!
:D
I'd personally add: -
*{
margin: 0px;
padding: 0px;
}
div.spacer{
width: 100%;
height: 30px;
}
html>body div.spacer{
height: 50px;
}
To the start of your css, and add a spacer Div in the HTML.
Simple solution, and easy to modify at a later date.
[edit] It also removes the empty trimming.
*{
margin: 0px;
padding: 0px;
}
div.spacer{
width: 100%;
height: 30px;
}
html>body div.spacer{
height: 50px;
}
To the start of your css, and add a spacer Div in the HTML.
Dave:
"My influences are wedged somewhere between Autobahn and They
Might Be Giants."
UnitePunk:
How would you describe the musical style of Heroes For Sale?
Simple solution, and easy to modify at a later date.
[edit] It also removes the empty trimming.
Even if I set the border and padding property for both the left and right divs to 0px, and also set the q divs padding to 0px it has no effect...
I'm not sure what it could be... With IE there was an issue that the left div was always 2 lines in height despite only having one line of text. Think it was because the text was right aligned. Deleting the text-align propert for that div and simply setting that font style to float to the right solved it there... Dont know if that could give some insight into what's going on here...?
I'm not sure what it could be... With IE there was an issue that the left div was always 2 lines in height despite only having one line of text. Think it was because the text was right aligned. Deleting the text-align propert for that div and simply setting that font style to float to the right solved it there... Dont know if that could give some insight into what's going on here...?
div.q {
width: 550px;
margin: 0px auto;
clear: both;
border: 1px solid white;
}
div.left {
width: 100px;
float: left;
border: 1px solid red;
}
div.right {
width: 440px;
float: right;
text-align: left;
border: 1px solid blue;
}
Try playing with the padding/margin of the individual classes. IE box model would seem to be the issue here, as although tis fine in IE, FF is assigning default padding/margin values (which is correct) as you have non stated.
width: 550px;
margin: 0px auto;
clear: both;
border: 1px solid white;
}
div.left {
width: 100px;
float: left;
border: 1px solid red;
}
div.right {
width: 440px;
float: right;
text-align: left;
border: 1px solid blue;
}
Try playing with the padding/margin of the individual classes. IE box model would seem to be the issue here, as although tis fine in IE, FF is assigning default padding/margin values (which is correct) as you have non stated.
Hey, for the past few weeks I have been redesigning my entire website to use CSS for layout and text styles, which is quite a challenge seeing as previously it was all DreamWeaver (or Frontpage for older pages...) generated HTML...
[URL] http://www.unitepunk.co.uk/interviews/hfs.htm [/URL]
This is the page for one of the interviews on the site. If you check it out in Internet Explorer it looks as I want it, with no gaps between different peoples speech except when a new question is asked.
In FireFox however, for some reason the 'left' and 'right' divs (used to contain the speakers name and what they say respectively) seem to have top and bottom padding... Now I have tried setting the top and bottom padding to 0px explicitly, but this doesn't have any effect.
The white, red and blue borders are just so people can see what's going on... The white border is around the 'q' divs, which contain the 'left' and 'right' divs. 'left' divs are red, and 'right's are blue.
Any help appreciated!
[EDIT] - btw, [URL] http://www.unitepunk.co.uk/css/interviews.css [/URL] for the CSS.
[URL] http://www.unitepunk.co.uk/interviews/hfs.htm [/URL]
This is the page for one of the interviews on the site. If you check it out in Internet Explorer it looks as I want it, with no gaps between different peoples speech except when a new question is asked.
In FireFox however, for some reason the 'left' and 'right' divs (used to contain the speakers name and what they say respectively) seem to have top and bottom padding... Now I have tried setting the top and bottom padding to 0px explicitly, but this doesn't have any effect.
The white, red and blue borders are just so people can see what's going on... The white border is around the 'q' divs, which contain the 'left' and 'right' divs. 'left' divs are red, and 'right's are blue.
Any help appreciated!
[EDIT] - btw, [URL] http://www.unitepunk.co.uk/css/interviews.css [/URL] for the CSS.