No replies
godoploid
godoploid's picture
Offline
newbie
Fenton, mi
Last seen: 9 years 32 weeks ago
Fenton, mi
Timezone: GMT-5
Joined: 2010-12-21
Posts: 1
Points: 2

I have been coding a site and I ran into a problem with Google Chrome. I am trying to make a three column layout, two sidebars and a main content area. I am using divisions with a "Display: inline-table", but it is rendering it like I am using a "display: block". Below is a snippet of the html and corresponding css, if anyone could help I would greatly appreciate it! Thanks in advance!

/*********** HTML CODE *****************/

 
<div id="content">
                <div id="left">
                    <div id="search">
                    <form action="" method="">
                    <input type="text" name="search" class="search" />
                    </form>
                    </div>
                    <div id="sidebar-nav">
                    <ul>
                    	<li>link1</li>
                        <li>link2</li>
                        <li>link3</li>
                        <li>link4</li>
                        <li>link5</li>
                        <li>link6</li>
                    </ul>
                    </div>
                </div>
                <div id="center">
                    <div id="news-alert">
                    	<span id="alert">Breaking weather conditions: Heavy Storms and cold weather are</span>
                    </div>
                    <div id="copy">
                    <h2>Just a little about our town!</h2>
                    <p><img src="img/about.png" align="left" style="border:none;padding:10px;" />Originally, what is now Kandiyohi County was two 
                    separate counties - Kandiyohi and Monongalia. Both were 
                    established in 1858 and both functioned independently 
                    until the two counties merged twelve years later in an 
                    economical move. The people of the two counties realized 
                    that both counties were too small to function efficiently 
                    and economically as separate governmental units, so they 
                    formed one county government in a very lop-sided referendum. </p>
 
                    <p>The log cabin home of Mark Piper, Register of Deeds of original Kandiyohi 
                    County, served, more or less, as the original courthouse. Most of the County 
                    records were kept there and the commissioners used it as a meeting place. Piper 
                    took the County records with him when he left the area during the Sioux Uprising 
                    of 1862, and the records he saved now comprise the sole record of original 
                    Kandiyohi County's first four years of existence. </p>
 
                    <p>At times the county used the J. C. Bright cabin for a headquarters, for which they 
                    paid Mr. Bright the sum of $10.00. Piper was paid $50.00 for the same purpose, 
                    but for a period of two years. Several other homes were used as the Courthouse for 
                    short periods of time until 1870 when the County offices were officially 
                    established in rented quarters in Kandiyohi Station. </p>
                    </div>
                </div>
                <div id="right">
                <p>test to put information into the right sidebar</p>
                </div>
            </div>

/********************* CSS Code ***********************************/

#content { width: 1000px; height: auto; position: relative; background-image: url('../img/content-body.png'); background-repeat: repeat-y; vertical-align: top; }
	#left { width: 240px; height: auto; position: relative; display: inline-table; vertical-align: top; }
		#search { width: 224px; height: 33px; position: relative; display: inline-table; background-image: url('../img/search.png'); background-repeat: no-repeat; vertical-align: top; }
			.search { width: 125px; height: 15px; margin: 5px; float:right; }
		#sidebar-nav { width: 240px; height: auto; position: relative; vertical-align: top; }
	#center { width: 500px; height: auto; position: relative; display: inline-table; padding: 0px; vertical-align: top; }
		#news-alert { width: 500px; height: 64px; position: relative; display: inline-table; background-image: url('../img/news-alert.png'); background-repeat: no-repeat; background-position: right; padding-top: 30px; }
		#copy { width: 480px; height: auto; position: relative; display: inline-table; padding: 10px; vertical-align: top; }
			#alert { font-family: "Times New Roman", Times, serif; color: #b50000; text-align: left; font-size: 14px; display: inline-table;  }	
	#right { width: 230px; height: auto; position: relative; display: inline-table; vertical-align: top; padding: 10px; }

I have used Google Chrome a lot and never had this issue but now recently in the last month or two it seems like Google Chrome changed the way it displays the css "Display".

Here us a picture of the problem. Anything selected in red is where it SHOULD NOT be and the arrows show where I expected the code to place the elememnts:

screenshot.jpg