different view of table dimentions in browsers

Question

0.00/5 (No votes)

See more:

my question is about the difference occurs in table dimensions in IE and google chrome browsers:
my html code :

HTML

<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:

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 20:31pm

Sarah MQ

Updated 6-Nov-12 20:50pm

v3

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 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 7-Nov-12 3:18am

Q has been updated Tadit.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 7-Nov-12 3:22am

Oh yes.
Thanks Simon for notifying me.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 7-Nov-12 3:32am

Added one comment for the query... :)

enhzflep 7-Nov-12 3:58am

Haha. :-)

Sarah MQ 7-Nov-12 2:52am

Thanks Tadit to your response and i updated my question as you suggest

enhzflep 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 (ତଡିତ୍ କୁମାର ଦାଶ) 7-Nov-12 3:21am

Nice and clear information Simon...

enhzflep 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 (ତଡିତ୍ କୁମାର ଦାଶ) 7-Nov-12 4:52am

Hmmm... Correct.

Sarah MQ 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 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 (ତଡିତ୍ କୁମାର ଦାଶ) 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 MQ 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 (ତଡିତ୍ କୁମାର ଦାଶ) 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 MQ 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 (ତଡିତ୍ କୁମାର ଦାଶ) 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 MQ 8-Nov-12 3:08am

of course you can

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 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

2 solutions

Solution 2

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

Posted 7-Nov-12 22:09pm

StackQ

Add a Solution

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2012-11-07T21:43:00

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...

different view of table dimentions in browsers

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

different view of table dimentions in browsers

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us