I'm having problems right floating an inline element within a list. My problem only occurs within firefox.
Sample HMTL
<ul>
<li>CSS bugs fixed. (1) Unexpected rendering differences between opera and konqueror have been traced and fixed. (2) No line beneath the current tab.
<em class="version">TopMan v 1.2.4</em></li>
<li>CSS for System Information tables moved to extra.css in the System Information tab.
<em class="version">TopMan v 1.2.3</em></li>
<li>Error message added for incorrect password(s) on change password page.
<em class="version">TopMan v 1.2.2</em></li>
<li>Error message added for incorrect username/password on login.
<em class="version">TopMan v 1.2.1</em></li>
<li>Basic file-based user/login system added. Features include login in/out, changing password and adding users.
<em class="version">TopMan v 1.2.0</em></li>
</ul>
Sample CSS
em.version
{
float: right;
}
In Opera and Konqueror the em appears aligned right, on the same line (if it can fit) as the content in the li. In Firefox the em appears aligned right, always beneath the content in the li. (I've not had the chance to test in IE yet)
A full description of the problem along with screenshots and examples is on my home server (<!-- m --><a class="postlink" href="http://hack118.plus.com/?tab=Bugs&subtab=0001">http://hack118.plus.com/?tab=Bugs&subtab=0001</a><!-- m -->).
Any help would be most appreciated.Put the float before the rest of the text.Yeah, I've tried that and now I get a different bug, a fun one this time. Firefox and Konqueror now render as I want them to. Opera now puts the bullet points to the immediate left of the version number. I've tried forcing some space before the em, if you ignore the space at the beggining of each li Opera and Konqueror render correctly, but Firefox is again broken.
I've updated the Bug Report (<!-- m --><a class="postlink" href="http://hack118.plus.com/?tab=Bugs&subtab=0001">http://hack118.plus.com/?tab=Bugs&subtab=0001</a><!-- m -->) with these two attempts.Can you give me a link to the full page? There's the code you have, but what's the dtd and the rest of the CSS?The previous page that I have provided replicates the errors exactly. The actual page that the error occurs on is the Change Log (<!-- m --><a class="postlink" href="http://hack118.plus.com/?tab=Change+Log">http://hack118.plus.com/?tab=Change+Log</a><!-- m -->). I have modified the change log's css to clear:both all of the li's in the change log, as this is currently the best comprimise I can find.
Cheers.Hey there,
I think maybe I've got a solution... maybe...
Keep/put the 'em' part before the text and put this in your css : ul li {
position:relative;
padding-right:7em;
}
em.version {
position:absolute;
right:0;
top:0;
}
* html ul li {
height:1px;
}
Let me know if it works for you...Wonderful! Cheers. I've one problem left now, common to all of the browsers. Because we have brought the li's to the relative layer and the em's to the absolute layer they are now above the page_header (which is in the float layer). I've tried moving the page_header to the absolute layer, which, in Opera only, moves the li's below the page_header but the em's are still above it. Should I use z-index, how is this done properly?
The best page to see this effect on is the History for June 2005 (<!-- m --><a class="postlink" href="http://hack118.plus.com/?tab=Change+Log&subtab=2005%2F06">http://hack118.plus.com/?tab=Change+Log ... =2005%2F06</a><!-- m -->)
Cheers again.Try this...
Put your tabs div inside your header div and add this to your css :
#page_header {
z-index:100;
position:absolute;
}YAY
. That's good. I have also moved the links up to that z-index else the "User Pages" tab falls behind.
I have a really random bug, Opera only... When I move my mouse over one of the valid links at the bottom of the page a white box appears over the header. Is there a problem with the style for my #footer or .valid blocks?
This happens with any of the links inside the footer, including "Milkman" and "web-milk.co.uk"I don't see any major problems in the CSS you mention, but this bug you talk about must be really random, because I don't see it in Opera... (I'm using Opera 7.54 if that's any help)...Very random! I'm using Opera 8.0 Final build 1095 in Linux. Perhaps someone else can shed some light?
Cheers for the help, the list is much better in Firefox now. Not sure if I can live with the trade off though, as I use Opera as my main browser.
Oh, btw, what do you think of the design, layout, code in general?I like the style of your site - clear and simple. If you look at my personal site (in my sig) you'll see I like clean and simple stuff. I have two images and - like you - I use a 'position:fixed' menu. There are a few differences when you look at my site in IE - like with yours, I've fixed it so that the fixed positioning becomes 'absolute' and it looks OK (I actually had trouble with this in Opera, so I hacked it to make it like IE... sorry). I have some divs on the home page which appear on hover in good browsers, but I let them all just flow in IE because it was giving me trouble and I just couldn't be bothered fighting it anymore - people want to use IE, that's up to them.
Your code looks good to me... I'm sure you know more about this whole computer lark than I do. What's that you're doing there exactly? Developing a CMS?I designed my site in Opera and to flow first. Then afterwards I added the float styling in. This way I could "hack" them out (note the html>body's) so that IE would degrade back to the flowing view.
Your site looks quite cool, much prefer the beer style over the wine. But it's not looking so good in Firefox here. Konqueror is, I believe, the exact representation that you are after. I've not had the chance to test my site much in IE as I am running Linux on most of my machines.
The html for your comments lets the side down a little... All divs? Would be better with a defaultly formatted tag in there somewhere, like a p perhaps for the main text?
A nice idea might be to take a copy of the HTML without any style applied and, without looking at your existing stylesheets, try to recreate what you've got. Test it as often as you can and in as many browsers as you can get at!But it's not looking so good in Firefox here. Konqueror is, I believe, the exact representation that you are after. I've not had the chance to test my site much in IE as I am running Linux on most of my machines.
Not looking so good in Firefox? I'm shocked. Maybe it's because you're on Linux...? If that's the reason, then I won't be losing too much sleep.
The html for your comments lets the side down a little... All divs? Would be better with a defaultly formatted tag in there somewhere, like a p perhaps for the main text?
It's funny you should say that because I was looking at that earlier today thinking that it wasn't very good and I should change it. I have some free time in a couple of days and I'll do that. It's good to get a good kick up the arse like that to get me moving. Thanks.Not looking so good in Firefox? I'm shocked. Maybe it's because you're on Linux...? If that's the reason, then I won't be losing too much sleep. Don't worry about it. It renders fine on my mates computer, who is also running Firefox under linux. Strange.
I'm thinking about moving this design to my web-server, web-milk.co.uk (<!-- m --><a class="postlink" href="http://web-milk.co.uk">http://web-milk.co.uk</a><!-- m -->), but I need to do some work on it first to make it work with what I've already got there. I started making "TopMan" to put on my local development servers to make it easy to find my way around my folders and add quick notes. Also to play with CSS and distract me from revision.I thought I might as well change my code sooner rather than later and I've changed it - I think you'd agree it looks cleaner.I started making "TopMan" to put on my local development servers to make it easy to find my way around my folders and add quick notes. Also to play with CSS and distract me from revision.
So is that what it is - a CMS? I'm still not too sure...
You're at Loughborough University? I thought it was all sports there - what revision do you have to do?
Sample HMTL
<ul>
<li>CSS bugs fixed. (1) Unexpected rendering differences between opera and konqueror have been traced and fixed. (2) No line beneath the current tab.
<em class="version">TopMan v 1.2.4</em></li>
<li>CSS for System Information tables moved to extra.css in the System Information tab.
<em class="version">TopMan v 1.2.3</em></li>
<li>Error message added for incorrect password(s) on change password page.
<em class="version">TopMan v 1.2.2</em></li>
<li>Error message added for incorrect username/password on login.
<em class="version">TopMan v 1.2.1</em></li>
<li>Basic file-based user/login system added. Features include login in/out, changing password and adding users.
<em class="version">TopMan v 1.2.0</em></li>
</ul>
Sample CSS
em.version
{
float: right;
}
In Opera and Konqueror the em appears aligned right, on the same line (if it can fit) as the content in the li. In Firefox the em appears aligned right, always beneath the content in the li. (I've not had the chance to test in IE yet)
A full description of the problem along with screenshots and examples is on my home server (<!-- m --><a class="postlink" href="http://hack118.plus.com/?tab=Bugs&subtab=0001">http://hack118.plus.com/?tab=Bugs&subtab=0001</a><!-- m -->).
Any help would be most appreciated.Put the float before the rest of the text.Yeah, I've tried that and now I get a different bug, a fun one this time. Firefox and Konqueror now render as I want them to. Opera now puts the bullet points to the immediate left of the version number. I've tried forcing some space before the em, if you ignore the space at the beggining of each li Opera and Konqueror render correctly, but Firefox is again broken.
I've updated the Bug Report (<!-- m --><a class="postlink" href="http://hack118.plus.com/?tab=Bugs&subtab=0001">http://hack118.plus.com/?tab=Bugs&subtab=0001</a><!-- m -->) with these two attempts.Can you give me a link to the full page? There's the code you have, but what's the dtd and the rest of the CSS?The previous page that I have provided replicates the errors exactly. The actual page that the error occurs on is the Change Log (<!-- m --><a class="postlink" href="http://hack118.plus.com/?tab=Change+Log">http://hack118.plus.com/?tab=Change+Log</a><!-- m -->). I have modified the change log's css to clear:both all of the li's in the change log, as this is currently the best comprimise I can find.
Cheers.Hey there,
I think maybe I've got a solution... maybe...
Keep/put the 'em' part before the text and put this in your css : ul li {
position:relative;
padding-right:7em;
}
em.version {
position:absolute;
right:0;
top:0;
}
* html ul li {
height:1px;
}
Let me know if it works for you...Wonderful! Cheers. I've one problem left now, common to all of the browsers. Because we have brought the li's to the relative layer and the em's to the absolute layer they are now above the page_header (which is in the float layer). I've tried moving the page_header to the absolute layer, which, in Opera only, moves the li's below the page_header but the em's are still above it. Should I use z-index, how is this done properly?
The best page to see this effect on is the History for June 2005 (<!-- m --><a class="postlink" href="http://hack118.plus.com/?tab=Change+Log&subtab=2005%2F06">http://hack118.plus.com/?tab=Change+Log ... =2005%2F06</a><!-- m -->)
Cheers again.Try this...
Put your tabs div inside your header div and add this to your css :
#page_header {
z-index:100;
position:absolute;
}YAY
. That's good. I have also moved the links up to that z-index else the "User Pages" tab falls behind.I have a really random bug, Opera only... When I move my mouse over one of the valid links at the bottom of the page a white box appears over the header. Is there a problem with the style for my #footer or .valid blocks?
This happens with any of the links inside the footer, including "Milkman" and "web-milk.co.uk"I don't see any major problems in the CSS you mention, but this bug you talk about must be really random, because I don't see it in Opera... (I'm using Opera 7.54 if that's any help)...Very random! I'm using Opera 8.0 Final build 1095 in Linux. Perhaps someone else can shed some light?
Cheers for the help, the list is much better in Firefox now. Not sure if I can live with the trade off though, as I use Opera as my main browser.
Oh, btw, what do you think of the design, layout, code in general?I like the style of your site - clear and simple. If you look at my personal site (in my sig) you'll see I like clean and simple stuff. I have two images and - like you - I use a 'position:fixed' menu. There are a few differences when you look at my site in IE - like with yours, I've fixed it so that the fixed positioning becomes 'absolute' and it looks OK (I actually had trouble with this in Opera, so I hacked it to make it like IE... sorry). I have some divs on the home page which appear on hover in good browsers, but I let them all just flow in IE because it was giving me trouble and I just couldn't be bothered fighting it anymore - people want to use IE, that's up to them.
Your code looks good to me... I'm sure you know more about this whole computer lark than I do. What's that you're doing there exactly? Developing a CMS?I designed my site in Opera and to flow first. Then afterwards I added the float styling in. This way I could "hack" them out (note the html>body's) so that IE would degrade back to the flowing view.
Your site looks quite cool, much prefer the beer style over the wine. But it's not looking so good in Firefox here. Konqueror is, I believe, the exact representation that you are after. I've not had the chance to test my site much in IE as I am running Linux on most of my machines.
The html for your comments lets the side down a little... All divs? Would be better with a defaultly formatted tag in there somewhere, like a p perhaps for the main text?
A nice idea might be to take a copy of the HTML without any style applied and, without looking at your existing stylesheets, try to recreate what you've got. Test it as often as you can and in as many browsers as you can get at!But it's not looking so good in Firefox here. Konqueror is, I believe, the exact representation that you are after. I've not had the chance to test my site much in IE as I am running Linux on most of my machines.
Not looking so good in Firefox? I'm shocked. Maybe it's because you're on Linux...? If that's the reason, then I won't be losing too much sleep.
The html for your comments lets the side down a little... All divs? Would be better with a defaultly formatted tag in there somewhere, like a p perhaps for the main text?
It's funny you should say that because I was looking at that earlier today thinking that it wasn't very good and I should change it. I have some free time in a couple of days and I'll do that. It's good to get a good kick up the arse like that to get me moving. Thanks.Not looking so good in Firefox? I'm shocked. Maybe it's because you're on Linux...? If that's the reason, then I won't be losing too much sleep. Don't worry about it. It renders fine on my mates computer, who is also running Firefox under linux. Strange.
I'm thinking about moving this design to my web-server, web-milk.co.uk (<!-- m --><a class="postlink" href="http://web-milk.co.uk">http://web-milk.co.uk</a><!-- m -->), but I need to do some work on it first to make it work with what I've already got there. I started making "TopMan" to put on my local development servers to make it easy to find my way around my folders and add quick notes. Also to play with CSS and distract me from revision.I thought I might as well change my code sooner rather than later and I've changed it - I think you'd agree it looks cleaner.I started making "TopMan" to put on my local development servers to make it easy to find my way around my folders and add quick notes. Also to play with CSS and distract me from revision.
So is that what it is - a CMS? I'm still not too sure...
You're at Loughborough University? I thought it was all sports there - what revision do you have to do?