Hello everyone,
I'm putting together a web site at loverde.org (the most recent revision -- the one this post concerns, is at [deleted]). I've run into a number of issues with my CSS. Some of these "problems" are minor, while others are befuddling, major issues. I'll start out with the real problems.
You'll notice that I have a bar at the bottom which link descriptions appear in (wave your cursor over the menu). The link descriptions are enclosed inside SPAN tags that are absolutely positioned. There are two issues here.
First, Mozilla (plus anything else based on Gecko, I'd imagine), and IE do not display these SPANs in the same place. This is just pixel counting! "Put the contents of this tag X pixels from the top." Apparently there's more to it than that...
Second, (and perhaps this question should be answered before a resolution to #1 is sought), those can only be absolutely positioned if I know the location of the "status bar" DIV. That will change, depending on the length of the current page's content. So it can't stay in the CSS ([deleted]) the way it is right now. I don't know of a way to grab the correct location everytime.
I could completely eliminate this problem by using JavaScript to write to the innerHTML of the DIV tag, but I want to avoid using JavaScript. I'm quite comfortable with JS, but I don't want to use it. I'm hoping some CSS wiz out there knows an alternative.
Now someone is bound to mentions this, so I'll get it out of the way -- I'm aware of a bad design flaw. The placement of my link descriptions are coded specifically to my resolution. My resolution is 1280x1024. Mozilla users will notice nothing wrong in 1280. Lower than that and it will appear to far to the right; higher and it will appear too far to the left. This is also something I'd like to have some insight on. How am I supposed to know how far these things need to be indented? I'm not going to create a separate case for each resolution...
This design problem doesn't change the fact that IE and Mozilla are displaying the SPAN tags not even remotely close to where the other puts it.
That concludes my major problems. Now onto nitpicking...
In Mozilla, the column borders form a perfect intersection with the menu. In IE, the borders are a few pixels off. I believe the cause of this is similar to the first issue I listed. IE and Mozilla/Netscape just DO NOT appear to count pixels the same (??).
I'll graciously welcome any and all suggestions. Thanks.
---------------
EDIT: removed links, as they are now dead. The server logs were getting ridiculous. Solution was found -- no further replies necessary.
Thanks,
Kurt
---------------I really can't address your problem because I can't see the status bar and the links at the same time. In fact, no one @ 1024x768 will be able to. I would just go into cssEdit and get rid of the height on #mainContent, but you have it defined in an inline style tag. Alas, there is nothing I can do for you at the moment. I'd recommend fixing these to issues before going on, and strongly recommend moving your status bar a lot closer to the links.I have reduced the height by 300 pixels.OK, you're using absolute positioning, and you're defining a left, however your span is centered, because of this it will look different on every browser and resolution. I'd say you need to rethink your approach here.<span>, being an inline tag, doesn't seem like the right thing to use for absolute positioning. I think you really ought to be using <div>. (Actually I think you shouldn't be absolute positioning but that's fodder for another rant somewhere.)Hi Ray,
I don't want to use absolute positioning, either. I would love to be able to position it relative to another object, but I can't think of a way to do it.
Ignoring vertical placement for a second...
I can't use position:relative for horizontal positioning because the SPANs are tied to their respective links. It would work perfectly for one -- the first menu item. The others would be dragged further and further away from where I want them to display.
And if I were to get the horizontal positioning correct, there would still be vertical to account for. The height will be different for every page, based upon how much content is displayed in the middle column.
Frustrating, eh?As I suggested earlier, don't put those in the footer. Put them either directly above the links or directly below. It will save you a lot of trouble. And Ray, I don't think he could use div's (block) since they're within anchors (inline).Originally posted by Sam
And Ray, I don't think he could use div's (block) since they're within anchors (inline).
I just looked at the code. I'd try dropping the span, putting the class on the anchor and working from there. As is it does some wierd stuff when you just pull the span out of the selector but there's bound to be another change that will correct that.I appreciate the replies, but I don't know enough yet to go further with it, so I wrote a JavaScript function to change the text. I'm no logner worried about it.
However, I decided to try to get to the bottom of why I was having problems getting everything pixel-perfect.
I gave background colors to everything and decided to take a look at what was happening. It's pretty bad. There is no resemblance between what IE is doing and what Mozilla is doing.
I would very much appreciate it if someone could take a look at it. Also, I changed the URL of the test site to [deleted].
The first goal is to get these browsers to display the page the same way. IE is doing it more like how I want it, with the exception of the middle column's width. Those strips of yellow on each side should be eclipsed.
The second goal is to figure a way to get all three columns to expand their height to equal the largest of the three. If this does not happen, a problem emerges, which is illustrated by the large image in the index page's rightmost column. If I can't get that to work, I can't use the current layout.
My thanks to the forum members for their continued help.If anyone's still following this thread, the problem was that I did not include clear:both in the footer.
Thought I'd share the knowledge. IE seems to have assumed it for some reason.
I'm putting together a web site at loverde.org (the most recent revision -- the one this post concerns, is at [deleted]). I've run into a number of issues with my CSS. Some of these "problems" are minor, while others are befuddling, major issues. I'll start out with the real problems.
You'll notice that I have a bar at the bottom which link descriptions appear in (wave your cursor over the menu). The link descriptions are enclosed inside SPAN tags that are absolutely positioned. There are two issues here.
First, Mozilla (plus anything else based on Gecko, I'd imagine), and IE do not display these SPANs in the same place. This is just pixel counting! "Put the contents of this tag X pixels from the top." Apparently there's more to it than that...
Second, (and perhaps this question should be answered before a resolution to #1 is sought), those can only be absolutely positioned if I know the location of the "status bar" DIV. That will change, depending on the length of the current page's content. So it can't stay in the CSS ([deleted]) the way it is right now. I don't know of a way to grab the correct location everytime.
I could completely eliminate this problem by using JavaScript to write to the innerHTML of the DIV tag, but I want to avoid using JavaScript. I'm quite comfortable with JS, but I don't want to use it. I'm hoping some CSS wiz out there knows an alternative.
Now someone is bound to mentions this, so I'll get it out of the way -- I'm aware of a bad design flaw. The placement of my link descriptions are coded specifically to my resolution. My resolution is 1280x1024. Mozilla users will notice nothing wrong in 1280. Lower than that and it will appear to far to the right; higher and it will appear too far to the left. This is also something I'd like to have some insight on. How am I supposed to know how far these things need to be indented? I'm not going to create a separate case for each resolution...
This design problem doesn't change the fact that IE and Mozilla are displaying the SPAN tags not even remotely close to where the other puts it.
That concludes my major problems. Now onto nitpicking...
In Mozilla, the column borders form a perfect intersection with the menu. In IE, the borders are a few pixels off. I believe the cause of this is similar to the first issue I listed. IE and Mozilla/Netscape just DO NOT appear to count pixels the same (??).
I'll graciously welcome any and all suggestions. Thanks.
---------------
EDIT: removed links, as they are now dead. The server logs were getting ridiculous. Solution was found -- no further replies necessary.
Thanks,
Kurt
---------------I really can't address your problem because I can't see the status bar and the links at the same time. In fact, no one @ 1024x768 will be able to. I would just go into cssEdit and get rid of the height on #mainContent, but you have it defined in an inline style tag. Alas, there is nothing I can do for you at the moment. I'd recommend fixing these to issues before going on, and strongly recommend moving your status bar a lot closer to the links.I have reduced the height by 300 pixels.OK, you're using absolute positioning, and you're defining a left, however your span is centered, because of this it will look different on every browser and resolution. I'd say you need to rethink your approach here.<span>, being an inline tag, doesn't seem like the right thing to use for absolute positioning. I think you really ought to be using <div>. (Actually I think you shouldn't be absolute positioning but that's fodder for another rant somewhere.)Hi Ray,
I don't want to use absolute positioning, either. I would love to be able to position it relative to another object, but I can't think of a way to do it.
Ignoring vertical placement for a second...
I can't use position:relative for horizontal positioning because the SPANs are tied to their respective links. It would work perfectly for one -- the first menu item. The others would be dragged further and further away from where I want them to display.
And if I were to get the horizontal positioning correct, there would still be vertical to account for. The height will be different for every page, based upon how much content is displayed in the middle column.
Frustrating, eh?As I suggested earlier, don't put those in the footer. Put them either directly above the links or directly below. It will save you a lot of trouble. And Ray, I don't think he could use div's (block) since they're within anchors (inline).Originally posted by Sam
And Ray, I don't think he could use div's (block) since they're within anchors (inline).
I just looked at the code. I'd try dropping the span, putting the class on the anchor and working from there. As is it does some wierd stuff when you just pull the span out of the selector but there's bound to be another change that will correct that.I appreciate the replies, but I don't know enough yet to go further with it, so I wrote a JavaScript function to change the text. I'm no logner worried about it.
However, I decided to try to get to the bottom of why I was having problems getting everything pixel-perfect.
I gave background colors to everything and decided to take a look at what was happening. It's pretty bad. There is no resemblance between what IE is doing and what Mozilla is doing.
I would very much appreciate it if someone could take a look at it. Also, I changed the URL of the test site to [deleted].
The first goal is to get these browsers to display the page the same way. IE is doing it more like how I want it, with the exception of the middle column's width. Those strips of yellow on each side should be eclipsed.
The second goal is to figure a way to get all three columns to expand their height to equal the largest of the three. If this does not happen, a problem emerges, which is illustrated by the large image in the index page's rightmost column. If I can't get that to work, I can't use the current layout.
My thanks to the forum members for their continued help.If anyone's still following this thread, the problem was that I did not include clear:both in the footer.
Thought I'd share the knowledge. IE seems to have assumed it for some reason.