I've set up my site with a basic layout of 2 columns header and footer. On most of my pages this works as the left column isn't connected to the right. However on one page I've got a picture in the left column with an associated description in the right. Both of these elements will vary in height, but not width. Now, I got it to work by placing a div between the pictures clear-all with a set height to compensate for the difference on the right side. Looks good in the browser that I tested it with but when I did a final look using ie, chrome, opera, and firefox I found that each one is rendering the space differently. The height of the left column is not consistent so that the pictures don't line up with the description on the right. I would like to keep the 2 column layout consistent thru out my site. I there a way to compensate different browser renderings in this type of layout? Here's a link to the page, I launched it because I don't really expect much traffic yet. Thanks for any suggestions!
Craig
Different browsers render things differently (like default line heights, margins and font sizes of headings, and so on). To get everything to a common value you are supposed to use a reset.css. The most popular and what I am generally using in my projects is this one: http://meyerweb.com/eric/tools/css/reset/ . From what I can see on your website you are not using a reset.css. You need to grab a copy of that file (from the attached link), name it reset.css and import it before your actual style.css file -- in your case you have to import it before this rule: #import url("site_css/craig-smith.css");
NOTE: After importing the reset, you might have to adjust some of the original craig-smith.css, but in the end the rendering will look similar/consistent in all browsers.
Related
CSS - Floating two elements side by side
This conversation is similar to what I am trying to achieve. I have a % based layout and have an issue either the menu will get mixed in with the content or the content will fall below the menu when the page is shrunk or viewed on a mobile phone. I've spent several hours on this and cant figure out what I am doing incorrectly.
Problem child: https://www.tendercare-inc.com/new/
Update:
My biggest thing was getting something that worked well with Word Press as it uses very awkward controls and element names. I tried starting with _Underscores but it doesn't seem to have helped as much as I thought it would.
The basic problem is that you are specifying percentage based layouts for some elements like menu-sidebar and main-content but you're not consistent. The menu has a min-width of 200px. What do you want to happen when 200px is greater than 15%? Inside the menu you also have elements specified with exact pixel widths — the various cssmenu maker elements.
The site is very simple — basically a header, footer, side menu, and body. Yet you have two style sheets - one with over 800 lines — and a structure with site-content containing content-area containing site-main containing content-container. It's no wonder it's causing you grief. My advice would be to start over with a simple css framework (like bootstrap mentioned by #jaun above. Keep the structure of the html as simple as possible and avoid copy-paste design with things like menus. Also rather than trying things a seeing what's wrong, describe the behavior you want at various screen sizes and make it happen.
You should use bootstrap (getbootstrap.com) you can use col-md-6 clases to do that. Also mobile phone and tablet ajustment is supported
I've got to produce a print out of our records as per Creative's requirements. The layout is fairly simple, but it still makes use of the occasional highlight box and hairline ruler to divide up sections.
We have to support IE8, but for now, I'm developing in FF.
I currently have to go into Print Preview to examine my changes. It is a real pain to Close Preview, refresh the page with F5, then Alt-F+v to re-Preview every time I make the smallest change. Any way I can set my system up to view my changes more conveniently? I've got ReCSS, which is cool, but it does not work in Preview mode.
The only borders that seem to be supported are those around tables. So anywhere I need some element boxed, I end up wrapping it in <table><tr><td></td></tr></table> just to take advantage of the table border, which seems to be non-optional. Is there a more efficient way?
I need to divide content sections with horizontal rules (ideally several pixels thick, dashed or dotted). I have found no way to make a horizontal rule at all. I've tried styling my divs with border-bottom, which of course doesn't work. I've tried wrapping them in tables, then turning off the top left and right borders, which also doesn't work. I've tried <hr>, which also doesn't work. Ideas?
I hate to have to tell my Creative that they get text-with-a-side-of-text.
I have a table (I use it for my main layout) with a table cell that is only 20px high. The next cell is a rowspan of 2, that contains my main content. In firefox it isnt a problem at all. It stays at 20px (It's important because it is the bottom of the logo and just above the menu). In internet explorer, the cell decides not to stay at 20px high.
I am doing eveything I can think of (stylesheet, inline style and JavaScript). There has to be a way that I can keep it from resizing depending on the content of the page.
Here is the address of the page in question: http://www.rat-pack.com/Members.php
The issue is nothing you are doing wrong, it relates to how IE handles locations and table attributes
Try the following
http://www.quirksmode.org/js/detect.html
if you use JS to detect what browser is being run, you can create a custom style sheet for each, which is how you work around browser limitations
Best of luck to you
I have a weird problem on a CSS menu. There's a difference in padding applied by both
Firefox & IE9 vs Chrome & Opera browsers. The space left after the last menu item at the end of the menu is different on both the browsers.
Please see the chrome.jpg and firefox.jpg inside zip file to see what I mean.
I have also attached the source html file.
here is the zip file -
https://www.sugarsync.com/pf/D6612639_7394829_952554
Chrome:
Firefox:
This is not padding but likely a difference in how the fonts are rendered in different browsers. Yeah that is pretty much impossible to solve unless you make the menu items fixed width. :)
The firefox version looks bolder (see it?!)... These are brainbreaking problems not fun to deal with but quite easy to explain.
IE9/Firefox use a different technique to render text than Chrome/Opera do.
IE9/Firefox use DirectWrite, and so the text comes out ever so slightly wider, adding up to a few pixels difference over all the menu items.
Read more here: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite
And read this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
Short of setting a fixed width on each menu item (don't), you can't fix it. However, you don't need to fix it: a few pixels difference between browsers does not matter. Remember, the users of your site are only looking at it using one browser.
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).