CSS - Iphone Problem: The Right Edge Of My Site Gets Cut Off

I would like the content table on the website to stretch as to the edges of whatever space it is taking up. But when I view the page, the table doesn't stretch vertically down until it hits the bottom edge. Any ideas?

PHP Code:
.content {
    height: 100%;
    width: 100%;
} 

I have been trying to figure out how to achieve this layout with css for about an hour. I'm sure it is something very simple that I am missing.

Can anyone help?

It looks like the image at the address below.

tophermorrison.com/css_layout.jpg

I have 3 divs

1.banner (100px tall 100% wide)
2.content (100% tall 650px wide)
3.image (100px x100px)

I want the image to stay relative with the content and the content to be centered. The image should be 0 from the top and centered over the right edge of the content.

Is this possible?

Greetings,

I have the following in a style sheet:

Code:

.nameColumn {
width: 200px;
}

.groupColumn {
width: 100px;
}

.statusColumn {
width: 682px;
}

In the body of the page, I have table rows like this:

Code:

<tr>
<td class=nameColumn>foo</td>
<td class=groupColumn>bar</td>
<td class=statusColumn>foobar</td>
</tr>

Even though I have declared widths, they show up differently on Windows IE7 than on Mac Safari. In IE, the "statusColumn" column falls short of the right edge of the window. Is there a way, with the width property, to make the rightmost column automatically stretch to the right edge of the browser window?

If I use width:auto, it makes the cell only as wide as the text it contains.

Thanks!!
DM

hello genius people...

please help this designer move more toward css after years of tables and images...

I have a prob with ie 5 and 6 [not sure on 7] showing the content of a scrolling div outside of a containing frame.

http://jodihelmer.com/portfolio.html

and

http://jodihelmer.com/journal.html



the content in the scrolling frame shows up outside of the centered
content.

one possible fix I came up with is to increase the size of the divs at the edge and give them a background color. this seems to work.

but, I also need to hide the content to thetop and left of the frame as well.

is there a way to keep these divs within the centered wrapper while allowing them to expand to go to the edge of the browser window's relative size?

or is there a better way to do this altogether?

thanks so much.

s

I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm

Code:

.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Code:

<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close?

thanks in advance for your help

I am having trouble trying to work out why on an iphone my css file never gets used.

when a user arrives at my site with a screen size <= 1024 i apply a different style sheet using this function - http://www.kelvinluck.com/2006/05/s...ts-with-jquery/. i know this isnt a way of doing it for an iphone as you use user.agent but i am doing it for smaller screens at the same time.

Code:

<link href="index.css" rel="stylesheet" title="screen" type="text/css" media="screen" />
        <link href="css/mobile.css" title="mobile" rel="alternate stylesheet" type="text/css" />

that is how i order my stylesheets in my html. on opera on the iphone the css works fine but its just safari. on android the site works fine.

any help would be really grateful

thanks in advance

Here's the CSS excerpt:

div#uhgWrapper
{
width: 320px;
height: 268px;
}
div#uhgWrapper[footerIncluded="false"]
{
height: 310px;
}
body[orient="landscape"] div#uhgWrapper
{
width: 50px;
height: 50px;
}
body[orient="landscape"] div#uhgWrapper[footerIncluded="false"]
{
height: 50px;
}


this works great for Safari on the desktop but, the last two elements aren't recognized on Safari on the iPhone.

Any suggestions?

TIA

Hello,

I have just got round to testing my site on my iPhone for continuity and I have found a weird problem. Here is the situation, on my blog I sometimes need to show blocks of code so I naturally use <pre></pre> tags. Some blocks of code are too wide for my content column so I coded up a little expander box with jQuery. This works fine and I'm really happy with it but the iPhone manages to screw it up. If you can test a page on my blog (rendernaut[dot]com) and navigate to a code block, you can see it is just a simple toggle switch. But when this is done an an iPhone the font inside of the block increases proportional to the width. Its the only browser I've tested which does it, does anyone have any answers to why this is?

Thanks

Hi,

I don't have access to Dreamweaver's tools and was wondering if there was a way to test my designs on iPhones and iPads, without actually having an iPhone or iPad.

Thanks!

- M

OK, the site looks great in all browsers, Mac and PC. But on an iphone, the footer background does not expand the width of the screen. I don't know why.
Here is the site here

Does anyone know how to make this work on an iphone?

thanks

Hi,
I run this Farsi site and yesterday, I posted a few articles and suddenly I noticed my sidebar is out of its place! It is using wordpress and I must say, I did not change any css or did anything with the theme...just did normal posting.
Would you kind people tell me how I can find out where the problem is in these cases?

I checked to see if there is any extra code in the text of the articles recently posted, but found nothing...pure text and few <a> and <img> html tags....
size of the pictures are also moderate as you can see...

I know you can't read the text, but where do you think I should look for the problem?

the site address is (oh i can't post links!!!)
please use 'punez' dot 'nafice' dot 'com' (it's a subdomain)

http://www.mattcampy.com/therealsamsclub


Everything looks cool till the bottom of the browser, the page background just stops randomly.

Can anyone point me in the right direction?

CSS file: http://www.mattcampy.com/therealsamsclub/s/styles.css

..never mind!

Hello!

I used CSS to vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this?

Here is the css I used to center the site:

#wrapper {
width:850px;
height:650px;

position:absolute;
top:50%;
margin-top:-325px;
left:50%;
margin-left:-425px;
}

And here is the site:
(URL address blocked: google Maid Marian Muffins)

I need the result to be fully functional i.e. zoom & pinching functions must still work.

Im just playing around with CSS and Photoshop and made this so far:-
http://www.o0matte0o.myby.co.uk/windows-vista/
Lazy Link

It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please?

I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S

Code:

body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }

#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; } 
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }

Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.)