Some CSS help?
A couple of people have told me my site doesn't look right in Safari. They both said my main middle column was super-narrow, and one person mentioned that he had to do some horizontal scrolling to see everything. I changed the width of the main column and changed the margin padding, but I can't test it in Safari. Safari users, would you mind clearing your caches and telling me how it looks now? CSS-savvy people, is there any way to make the width of the middle column variable? I'd appreciate the help immensely.
- Clancy's blog
- Login to post comments
Comments
What seems to happen for me i
What seems to happen for me in Safari is, on the first page, now the layout is exactly the same for the 3 columns--the middle one is still narrow--but the background just expands off to the right.
But when you click on an individual post, the new page opens up so that yes, the middle column is wide. I don't know how to fix it, I'm afraid, and I personally don't think the narrow middle column is a huge deal, but FYI. Is that clear enough? If you want more detailed info, just email me or message me: bitchphd on yahoo.
Crap.
Maybe someone will come along and give me a CSS tip that will automagically fix this thing. Mike made the same observation that individual posts look okay, but the main page doesn't. I wonder why that is??
Fluid width
Well looking at the site in an 800x600 window (as I usually view sites), the main page resizes itself to my browser size quite nicely. And if I resize the browser, the page expands to fit. There's still a horizontal scrollbar though, even at 1024x768.
The article page however, seems to insist on being at least 1024px wide, so I have to scroll at 800x600. Again, it will expand to fit if I make the browser any wider.
Perhaps this has something to do with the differences in Safari rendering the main page and the individual posts?
iCapture used to be great for checking layout in Safari, but it seems broken at the moment. I'm just getting blank screens when I ask it for a screenshot of this URL.
css and horizontal scroll
I took a look at your code and I'm not sure what's going on. Your CSS and code is different than what I've worked with in the past. For example, I couldn't find the class "block block-block" in any of your CSS. I went to Drupal.org and the Drupal site scales based on how large my browser window is. That is, if I make my window really tiny, their content keeps scaling based on the size of my browser window. So it could be a matter of a fixed-width site vs. a scalable site.
Drupal's "content" sections are very detailed. They have a CSS for each section. See section: /* 1-3 Column layout */ on their css: http://www.drupal.org/themes/bluebeach/style.css Does comparing CSS help any? Also, your .block { width: 180px; might be a problem. If this was a percentage instead, it might help things. But, I'm not sure without testing.
Sorry I'm not more exact help. You might try posting to the Drupal.org forum for better assistance. I thought about erasing this, but then I thought it might give you some ideas so I left it alone.
Then, as far as horizontal scrolling, I think it's your top logo that is forcing the width larger than the resolution can accomodate. I don't know if these two issues are related. At 800x600, I see no more than "Rhetoric and Femin" before I have to scroll right to see the rest of your logo. If it was no larger than 800 pixels, then it might help things. I can't make my screen resolution bigger to see how it changes.
CSS
Looking at your site in Konqueror (Debian flavor) makes me want to second Marcia's caveat about the top logo--I do think it's causing the h-scroll. Otherwise, it looks much the same on my screen as it does in Firefox; makes me think this is a Safari-only rendering issue, if that's any consolation. I don't know what Apple does to the kHTML base to differentiate Safari from Konq, but it's obviously something.
Cropped the logo
I cropped the logo; does that help at all?
Gah.
I resized it to be 800 pixels in width, and now, on my screen anyway, the type is all aliased. Then when I try to fix it in PhotoShop, every time I select the type tool and click on the image somewhere, it applies a weird pink layer to the whole thing.
page width
On the main page, it fits in my browser/in my screen.
On this page here that I'm typing in, the right column hangs off out of site - it's like it's too wide. And yeah, so there's a horizontal scroll bar.
I'm using Firefox and have a resolution of 1024.
Still does it
Clancy, I cleared my cache in Safari, and the same thing still happens: the main page is wayyy narrow, but individual entry pages are fine. When I was at work, I checked it in Windows versions of Firefox, Opera, and MSIE, and the same thing happens in all three: individual entry pages are always too wide for the browser window, necessitating a horizontal scroll, while the main page isn't, and requires no horizontal scroll. So the common thing between Windows and Mac browsers (at least for me) seems to be that individual entry pages are always wider than the main page. Are you using different stylesheets for the main page versus individual entry pages? If not, then the inconsistency may be in the ordering of your HTML elements. But thanks for being concerned about making it look purty for us Mac users. :-)
did you try...
Maybe it's as simple as your margins on the page. Have to played with the left and right margin settings? You seem to have very large margins on your page.
CSS
body
{
margin-left: 10px;
margin-right: 10px;
}
fix
if you make the width into a percentage it will change the size to fit the page no matter what resolution or browser your using. its the same as a liquid layout. as long as its in percentages it will be easier to view. i myself use firefox and have no problem viewing the page.
Images?
Does that trick (making the width into a percentage) work with images too, or just columns?