Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: HTML table
my question is about the difference occurs in table dimensions in IE and google chrome browsers:
my html code :
 
<tr>
<td colspan="21" width="950" height="284" style="background-color:Black;">
		
	<div id="features" style="overflow: hidden; width: 950px; ">
		<ul style="removed: relative; margin: 0px auto 0px 0px; removed -3px;  width: 950px; removed 0px; height: 288px;">
				<li style="removed: absolute; removed 0px; removed 0px;  display: none; z-index: 3; opacity: 0; width: 950px;">
                    <img src="images/topbanner1.jpg" alt ="" style="height: 288px; width: 950px"/></li>
				<li style="removed: absolute; removed 0px; removed 0px;  display: none; z-index: 2; opacity: 0; width: 950px;">
                    <img src="images/topbanner2.jpg" alt="" style="width: 950px; height: 288px" /></li>
				<li style="removed: absolute; removed 0px; removed 0px;  display: list-item; z-index: 1; opacity: 1; width: 950px;">
                    <img src="images/topbanner3.jpg" style="width: 950px; height: 288px;" alt=""/></li> 
                   
</ul>
</div>
 
</td>		
<td>
<img src="images/spacer.gif" width="1" height="288" alt=""/></td>
	</tr>

and the css:
#features {
			width: 950px; 
height: 286px; 
 
/*margin: 0 0 48px 0;
			overflow: scroll; /* Changed to hidden if javascript enabled*/
		}
		#features ul {
				width: 950px; 
				height: 286px; 
			}
			
			#features ul li {
				float:  right;
				width: 950px; 
				height: 286px; 
			}

 
the view of this td in IE browser is truly 950px
but when i view it in google chrome the width is change to 1282px!!!!
 
please i need your help to fix my trouble and know the reason behind this difference
Posted 6-Nov-12 21:31pm
Sarah MQ1.1K
Edited 6-Nov-12 21:50pm
v3
Comments
Tadit Dash at 7-Nov-12 2:43am
   
I used this code by adding table and tr tags...
It shows me 950 px in both the browsers.
 
Please post full page code and css code (if any) by clicking on "Improve question" link. It would be helpful to find the bug with that.
I apprehend some css is overiding the table structure.
 
Thanks.
Tadit
enhzflep at 7-Nov-12 3:18am
   
Q has been updated Tadit.
Tadit Dash at 7-Nov-12 3:22am
   
Oh yes.
Thanks Simon for notifying me.
Tadit Dash at 7-Nov-12 3:32am
   
Added one comment for the query... :)
enhzflep at 7-Nov-12 3:58am
   
Haha. :-)
sarah mm at 7-Nov-12 2:52am
   
Thanks Tadit to your response and i updated my question as you suggest
enhzflep at 7-Nov-12 3:18am
   
A couple things that I observe:
1) Using your html/css (and wrapping the tr in table and tbody tags) - In Chrome 22.0.1229.94 m under Windows7, the width is 952px
2) In IE9 the width is also 952px
2) You have used the invalid style attribute, 'removed' - e.g "removed: absolute;"
 
I suppose from the comments that these attributes will be later modified with javascript, but can't really ascertain your intentions and method of use.
 
Sorry, I know there's really no advice here - its really not possible in this instance to say without seeing more html/css. Perhaps something else is having an unintended consequence. Sometimes malformed tags can have an effect like you describe - messing up the rendering in one/some browser, while others seem to guess correctly.
 
Off topic - See that little green arrow ( <-Reply ) to the right-hand-side of Tadit's comment? If you use that icon, instead of "Have a Question or a Comment", then Tadit will get email notification of your comment, instead of you. :)
If you use the "Have a Question or A Comment" button, the author of the Question _or_ Solution will be notified. Comments are a special-case, you need to use the <- Reply icon. :)
Tadit Dash at 7-Nov-12 3:21am
   
Nice and clear information Simon...
enhzflep at 7-Nov-12 3:32am
   
Thanks mate. I think a lot of new users get caught-out on the correct reply button to use. (I know I sure did when I first used the QA section ☺)
Tadit Dash at 7-Nov-12 4:52am
   
Hmmm... Correct.
sarah mm at 7-Nov-12 3:26am
   
first thank you to your advice about using reply :p
and you are not sorry because you remember me the javascript file i use it in the feature div
enhzflep at 7-Nov-12 3:57am
   
You're welcome sarah mm. :)
Oh, but I am sorry! (perhaps there is a bad translation between us? - do you mean 'wrong' instead of 'sorry'?)
Tadit Dash at 7-Nov-12 3:30am
   
Hi Sarah,
 
Please go through the comments added by @enhzflep.
The width we are finding in different browsers is 952 px as @enhzflep has given the data.
 
But I can see some image tags are added inside li tags, which we don't have right now. And the li tags have attribute "z-index", which may change the structure of the div.
 
So, what to do ? Try the steps below...
 
1. Just simplify your code by removing the attributes which are not needed as @enhzflep has suggested one of "removed: absolute;" attribute.
 
2. Please explain what the exact thing you want to achieve by this code.
 
3. Define your Environment of testing the code that is Browser versions, OS and others.
 
Thanks,
Tadit
sarah mm at 7-Nov-12 4:10am
   
1.i tried to simplify the code by removing the div "feature" at all but the problem still appears.
2.i want to have a banner like one in this site "http://line25.com/wp-content/uploads/2010/snowboard-design-code/demo/index.html"
3.i use visual studio 2008 ,windows 7,IE9,GOOGLE CHROME 22.0.1229.94
Tadit Dash at 7-Nov-12 5:16am
   
Thanks for the information.
I checked the website and found that the div "features" has width "940px". So no matter what content goes inside it and what width it has inside that div (like the ul tag inside this div has width "2820px"), but the width will be taken from outer div which contains all.
So, width will be 940 px.
 
And do you see any problem in the page due to the change of width to "1282px" ?
I cannot see this change in width in Chrome browser at my end.
sarah mm at 8-Nov-12 2:43am
   
you are right and i solve the problem. the width became 1282px because of another td dimension altered by function call
the problem not in this td
thanks again to your help Tadit
Tadit Dash at 8-Nov-12 2:57am
   
Most welcome... Anytime...
If I added one answer, then you would have accepted it now... :P and I might have got point.... Oh I missed the points... :P
 
But we need to close this question as answered...
So, should I add one answer for the same and you would accept that ?
sarah mm at 8-Nov-12 3:08am
   
of course you can
Tadit Dash at 8-Nov-12 3:44am
   
Thanks a lot @sarah mm.
Yes I have added one answer.
 
Please accept this answer. This will help others to find the answer in one go and you will also be awarded with some points for this action...
 
Thanks,
Tadit
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I checked the website http://line25.com/wp-content/uploads/2010/snowboard-design-code/demo/index.html[^] and found that the div "features" has width "940px".
 
So no matter what content goes inside it and what width it has inside that div (like the ul tag inside this div has width "2820px"), but the width will be taken from outer div which contains all.
So, width will be 940 px.
 
And as per the comments by @sarah mm -
@sarah mm wrote:
you are right and i solve the problem. the width became 1282px because of another td dimension altered by function call
the problem not in this td.
Thanks @sarah mm for updating me that your problem is solved.
 
Thanks a lot...
Comments
Tadit Dash at 8-Nov-12 4:32am
   
Thanks for accepting and upvoting the answer @sarah mm.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

U should use % value instead pixel.Then it will automatically work.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 277
1 Maciej Los 220
2 DamithSL 190
3 Raul Iloc 185
4 Richard MacCutchan 175
0 OriginalGriff 5,130
1 DamithSL 4,197
2 Maciej Los 3,670
3 Kornfeld Eliyahu Peter 3,470
4 Sergey Alexandrovich Kryukov 2,821


Advertise | Privacy | Mobile
Web02 | 2.8.141216.1 | Last Updated 8 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100