CSS Columns Messed Up On Linux

[Planet13]

Hey everyone:

I have some columns that look fine in the major browsers in Windows, but are messed up in Linux on Firefox and Opera (but not chrome)

The basic concept is something like this:

DIV
DIV LEFT
DIV MIDDLE
DIV RIGHT
DIV LEFT .2 (SHOULD BE LEFT COLUMN IN SECOND ROW)
DIV MIDDLE .2 (SHOULD BE MIDDLE COLUMN IN SECOND ROW)
DIV RIGHT .2 (SHOULD BE RIGHT HAND COLUMN IN SECOND ROW)

I know you probably need to see more code, but in general, off the top of your head, is there something wrong with this sort of a layout?

If need be, I can post the entire html and css here, but I am having a pain of a time trying to get my html to indent correctly when I pasted it into notepad++.

Thanks in advance.

[Planet13]

Just a thought:

Instead of trying to debug MY code, maybe someone could post an example of hot to PROPERLY code what I am trying to do (i.e., two rows with three columns in each row), so I can then try and figure out how to do what I am supposed to do.

Thanks.

~~~~~~


Ok, here is the html code:

<div id="inner">
<div class="wrap">
<div id="content-sidebar-wrap">
<div id="content" class="hfeed">
<div id="home">
<div>
<div class="home-left">
<div id="featured-post-2" class="widget featured-content featuredpost">
<div class="widget-wrap">
<div class="post-3163 post type-post status-publish format-standard has-post-thumbnail hentry category-about-buddhism entry">
<h2>
<a href="http://www.example.com/blog/buddha-poses/">Buddha Poses and Postures: The Meanings of Buddha Statues</a> 
</h2>
<p>
You should know what the meaning of a Buddha statue is BEFORE you buy it, shouldn&#8217;t you? Learn what these most common Buddha poses symbolize.
</p>
</div>
</div>
</div>
</div>

<!-- end .home-left -->
<div class="home-middle">
<div id="featured-post-3" class="widget featured-content featuredpost">
<div class="widget-wrap">
<div class="post-3033 post type-post status-publish format-standard has-post-thumbnail hentry category-about-buddhism entry">
<h2>
<a href="http://www.example.com/blog/where-to-place-buddha-statue/">Where To Place Your Buddha Statue</a>
</h2>
<p>
Do you have your Buddha statue in the right place? Or are you setting yourself up for bad Karma by having your statue in an inappropriate location?
</p>
</div>
</div>
</div>
</div>

<!-- end .home-middle -->
<div class="home-right">
<div id="featured-post-4" class="widget featured-content featuredpost">
<div class="widget-wrap">
<div class="post-2565 post type-post status-publish format-standard hentry category-about-buddhism entry">
<h2>
<a href="http://www.example.com/blog/buddhism-introduction/">Buddhism 101: An Introduction To Buddhism</a>
</h2>
<p>
Learning about Buddhism? Start here with an easy introduction to Buddhism and the Buddha.
</p>
</div>
</div>
</div>
</div>

<!-- end .home-right -->
<div class="home-left-lower">
<div id="featured-post-7" class="widget featured-content featuredpost">
<div class="widget-wrap">
<div class="post-2579 post type-post status-publish format-standard has-post-thumbnail hentry category-about-buddhism entry">
<h2>
<a href="http://www.example.com/blog/how-convert-buddhism/">How To Convert To Buddhism</a>
</h2>
<p>
Many people wonder how they can convert to Buddhism, and whether there are any &#8220;secret&#8221; initiations involved in it.
</p>
</div>
</div>
</div>
</div>

<!-- end .home-left-lower -->
<div class="home-middle-lower">
<div id="featured-post-5" class="widget featured-content featuredpost">
<div class="widget-wrap">
<div class="post-2934 post type-post status-publish format-standard hentry category-about-buddhism category-about-hinduism entry">
<h2>
<a href="http://www.example.com/blog/mudras-sacred-hand-gestures/">Mudras: Sacred Hand Gestures In Buddhism and Hinduism</a>
</h2>
<p>
Did you know that the different hand gestures all have a deep meaning in Buddhist and Hindu art?
</p>
</div>
</div>
</div>
</div>

<!-- end .home-middle-lower -->
<div class="home-right-lower">
<div id="featured-post-9" class="widget featured-content featuredpost">
<div class="widget-wrap">
<div class="post-3027 post type-post status-publish format-standard hentry category-about-buddhism category-about-hinduism entry">
<h2>
<a href="http://www.example.com/blog/what-is-dharma/">What Is Dharma: Buddhist and Hindu Dharma</a>
</h2>
<p>
Dharma is an essential concept to Buddhism and Hinduism, but it is also one of the least understood.
</p>
</div>
</div>
</div>
</div>

<!-- end .home-right-lower -->
</div>

[edited by: not2easy at 4:16 pm (utc) on Nov 5, 2014]

[not2easy]

I reformatted the code for you to make it readable (and to comply with forum rules) and need to ask that you check the forum Charter: [webmasterworld.com...] when you get a chance. I'm guessing that you left some of the html out, this is not the whole page from <body> to </body>, right? If so, you're missing a few </div> tags that could explain some issues.

Lets try to take the problem one step at a time. First validate your code for html and css. If your code validates and there are still some problems, try to track down the problem. People are happier to help when they are solving a specific problem and the discussion is more useful for others.

[Planet13]

@ not2easy:

Thanks for taking the time to reformat the text. As mentioned, I can't seem to get it to format correctly in my editors...

First validate your code for html and css.

What should I be using to validate them? Any specific tool(s) you can recommend?

[lucy24]

As Freud said: sometimes a table is just a table. And then you can style <td> to {display: block} below a given viewport size. Conversely, setting your elements to {display: table-row} and {display: table-cell} should make them behave as intended.

&#8217;

Oh, come on, Planet. Just set the charset to UTF-8 and then you can use literal curly apostrophes at a savings of four bytes each, with greater readability. (In html5 you aren't supposed to use anything but the Reserved Three: &gt; &lt; and &amp; though the validator so far doesn't object to others. I use &nbsp; and &mdash; because their as-is forms are invisible in my text editor. And of course &shy; which would be literally invisible.)

In the first section of the quoted html, I count TEN nested divs. This strikes me as overkill. In fact if I saw it on a "live" page I'd assume it was a CMS.

Edit: Oops, I overlapped not2easy. Here are the standard validators: HTML, CSS and links, in that order.

[validator.w3.org...]
[jigsaw.w3.org...]
[validator.w3.org...]

My bookmarks go straight to the "validate by upload" tab for both HTML and CSS, though WebmasterWorld's auto-linking may eat the fragment.

[not2easy]

One of the reasons I referred to the forum's Charter is because those links to the validators are there plus more tools for troubleshooting css. It helps a lot to narrow down the source of a problem. I also noted the nested ID divs which may or may not be involved since we can't see what's in the css.
Notepad++ used to format html, you might want to visit their site and see about an updated plugin for Tidy.

[Fotiman]

You might consider using something like Bootstrap, which includes a grid system where you could do something like this:

<div class="row">
 <div class="col-md-4">...</div>
 <div class="col-md-4">...</div>
 <div class="col-md-4">...</div>
</div>
<div class="row">
 <div class="col-md-4">...</div>
 <div class="col-md-4">...</div>
 <div class="col-md-4">...</div>
</div>

[not2easy]

In the first section of the quoted html, I count TEN nested divs. This strikes me as overkill. In fact if I saw it on a "live" page I'd assume it was a CMS.

It is pretty definitely a CMS, looks like WordPress. This usually means a huge css file with hundreds and hundreds of lines. I am guessing that is why it was not shared, the forum software has a default limit. (whew!)

Usually problem code can be isolated down to just 1 or 2 elements. The validation really helps narrow down to the causes of things that don't work as expected and makes fixing things easier.

[Planet13]

Hi all:

It is pretty definitely a CMS, looks like WordPress. This usually means a huge css file with hundreds and hundreds of lines.

Yes, it is wordpress, but it is on the Genesis framework, which is pretty lightweight (only 29K style.css file - hardly a behemoth).

Yes, genesis has a lot of nested divs with classes assigned that ARE NOT defined in the style.css by default. They just automatically put things in a div with an id or a class name so that IF YOU WANT TO add your own styling, you wouldn't have to hack into the php files and add IDs and classes by hand.

As Freud said: sometimes a table is just a table...

Well, it is more layout, not really tabular data. So I definitely want it to be responsive. (I have no clue if tabular data is responsive or not... will have to look into that).

Oh, come on, Planet. Just set the charset to UTF-8 and then you can use literal curly apostrophes at a savings of four bytes each, with greater readability.

I don't know where that came from. I blame not2easy for when he reformatted my code (sorry, not2eay; no good deed goes unpunished!)

Otherwise, it was WP / Genesis. I actually have no idea what the character codes are for most things and I certainly don't even know HOW to set the charset to UTF-8... or anything else for that matter.

[Fotiman]

So I definitely want it to be responsive.

Check out Bootstrap [getbootstrap.com]. :)

[Planet13]

Check out Bootstrap [getbootstrap.com]. :)

I really don't know what bootstrap is, nor what the advantage would be over using just the genesis framework with some proper CSS coding.

I am sure that there are some advantages (and disadvantages), I just don't see them explained clearly.

Would be nice if someone could summarize in 7 words or less what the advantage of bootstrap is.

[lucy24]

I certainly don't even know HOW to set the charset to UTF-8

If it started out as WP, there is probably a charset declaration in each page's <head> section. You can also set a charset globally in htaccess, though this may not have the intended consequences. The present forums are, ahem, cough-cough, slightly deficient in this respect. So a literal curly apostrophe would probably have changed into a numerical entity with or without moderatorial involvement. (not2easy is innocent!)

I have no clue if tabular data is responsive or not.

Data as such is/are neither responsive nor non-responsive. Responsiveness applies only to design, not to content.* Conformance checkers throw fits if your page contains tables at all; I don't think they can even tell what the content is. Anyway, it isn't about data but about relationships. If there is a relationship among elements side-to-side, and also a relationship among elements top-to-bottom, that's a table. For example a list of hotels giving price, location, contact info etc could be a table. It doesn't have to be census figures. (Mine tend to be either grammar or parallel translations. Easier to call it a table and then change the display on smaller devices than the other way around.)


* Design vs. content: Your movie theater is or is not wheelchair-accessible, but this tells you nothing about whether people in wheelchairs will enjoy the movie.

[Fotiman]

Bootstrap is the most popular CSS framework for developing responsive sites. It includes styles for creating a responsive grid layout by including a few classes:
[getbootstrap.com...]

It's possible that your Genesis framework may also provide something similar, but I'm guessing that if it does, it's not easy to find documentation on it (whereas Bootstrap has great documentation, and it's free).

Sorry, more than 7 words.

[Planet13]

Sorry, more than 7 words.

You are forgiven. ;-)

[not2easy]

No, those funny apostrophes were in there, BBEdit is incapable of inserting that stuff except manually.

WP generates the charset based on the DB settings in your wp-config file, but it is best not to change that setting unless you are certain that your DB uses a different charset or you are able to change that yourself - not generally a good idea on shared servers. If you view the page source in any browser you can see what it is.

If you want to look into working with Bootstrap, there's a post here about a site recently redone with it and more information about how it fits together: [webmasterworld.com...]

Back to finding the cause of misbehaving columns. Have you validated the html and css and found anything we can help with?

[Planet13]

I ran the html through the validator linked to in the charter.

there were 11 errors found, but none of them seem related in any way to my issue. Some of them are related to not having a closing / slash at the end of an image tag in a different part of the page altogether. Others were related to not having an alt tag for images or because the facebook like button or the genesis search form, or the google analytics script don't validate.

They aren't related to my issue though. Should I post the errors here? Do I need to go to a different forum to post the errors? Do I really need to spend time getting google analytics code to validate?

~~~~~

When I try to validate the CSS, I get these 2 errors:

Parse Error /* End Added the following css */ /* Table of Contents * Import Fonts * Defaults * Hyperlinks * Body * Wrap * Header * Image Header - Partial Width * Image Header - Full Width * Navigation Constants * Header / Primary / Secondary Navigation * Primary Navigation Extras * Inner * Home Welcome * Home Slider * Breadcrumb * Taxonomy Description * Content-Sidebar Wrap * Content * Column Classes * Featured Post Grid * Headlines * Ordered / Unordered Lists * Post Info * Post Meta * Author Box * Sticky Posts * Archive Page * Images * Post Navigation * Primary / Secondary Sidebars * Dropdowns * Featured Page / Post * User Profile * Buttons * Search Form * eNews & Updates Widget * Calendar Widget * Footer Widgets * Footer * Comments * Gravity Forms * Agency Green * Agency Orange * Agency Red */ /* Import Fonts ------------------------------------------------------------ */ @import url(http://fonts.googleapis.com/css?family=PT+Sans);

and also this error:

.agency .slide-excerpt Parse Error opacity=100) 

Again, neither of these are related to the sections in question (as far as I can tell).

Thanks in advance.

BTW: The validator gives off warning for every -moz-box-shadow and every -moz-border-radius. Are we really NOT supposed to be using them?

[edited by: Planet13 at 12:47 am (utc) on Nov 6, 2014]

[lucy24]

WP generates the charset based on the DB settings in your wp-config file, but it is best not to change that setting unless you are certain that your DB uses a different charset or you are able to change that yourself - not generally a good idea on shared servers. If you view the page source in any browser you can see what it is.

This seems to imply that the charset used by the database has to be the same as the charset declared in the generated HTML files. Is that right?

:: uneasily thinking that, since WP's target user-group includes people who are utterly clueless about HTML itself, let alone character sets, there must be a lot of 1252 sites out there ::

[not2easy]

If the only validation errors are not any clearer than

Parse Error /* End Added the following css */

I can't be much help with finding the cause for the different way it is behaving on Linux in some browsers. I am curious about the Parse Error part though because it can happen for a lot of little frivolous or serious reasons.

The html snippet that Fotiman has posted above is the general way to have two rows of three columns each, the appearance would all depend on the css you write to tell the elements what you want them to do.

@lucy24 - WP does not expect users to create valid html pages. It uses a little text editor where you can paste or type text, it creates the rest of the page or post internally based on theme, settings, etc. That is why it is so popular - you don't need to know any html or css to build a site with WP. No one can mess up the charset as it is auto generated based on the server and auto corrects non matching text entered, so even if you paste WIN-1252 into the editor interface it becomes valid characters for the DB charset (hence the apostrophe stand-ins).

[Planet13]

Hey all;

Well, I got it fixed.

Basically, I slightly modified the structure that Fotiman had posted earlier:


<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>

By giving the SECOND <div class="row"> a clear:both; styling.

<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
<div class="row" style="clear:both;">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>

[not2easy]

Happy to see you solved the issue, in case others have this problem, could you share some of the information that helped you resolve it? What do you have in the css for div.row and div.col-md-4? Is there a reason to use inline styles rather than a different class?

[Planet13]

Is there a reason to use inline styles rather than a different class?

Ummm... I'm lazy?

Using an inline style meant that I only needed to edit the home.php page.

Using a class would have meant editing BOTH home.php AND style.css page.

Ok, in all honesty, I will probably go back and do it the right way... eventually. But I just thought I would do it "quick and dirty style" first just to make sure I was barking up the right tree.

~~~~~

I could post the rest of my CSS code here, but are you SURE that you want other people learning CSS from ME? I mean, I worry that poor Lucy24 might have to seek therapy if she sees the rest of my CSS...

[not2easy]

LOL! No, we don't need the whole thing, but it is possible that other people may be dealing with the same issues and being able to see the solution here, rather than just fixing it for one, it might be helpful to others. Perfectly common to use an inline fix to try it out.

What I was asking for was the specific lines of css for the fix, not the whole site. I understand if it is too much right now while you want to move ahead, maybe when you do replace the inline styling and add it to the css you could drop a note here with the css for div.row and div.col-md-4. Who knows, you might get more useful information if people could see what we're talking about.

[Planet13]

Will do.

Right now I am still struggling to figure out why Notepad++ is not indenting my code automatically. Once I get that figured out, I will try and post it.

[lucy24]

BTW: The validator gives off warning for every -moz-box-shadow and every -moz-border-radius. Are we really NOT supposed to be using them?

CSS validators will always yap about vendor prefixes. This is an inherent property of the prefix: they're not supposed to be recognized by generic CSS. So in this special circumstance, you can ignore validator warnings. Except, ahem, if you're using vendor prefixes, see whether you also need a -webkit- version of the same thing. (-o- is rare, and msie is so rare I don't even remember what the prefix is called.) It depends on the specific property involved; see
caniuse.com
when you want to look up some particular feature. (Skip the "import" option.)