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

Hello,

I have a page that has one big table covering all areas. The problem is that there is a tiny white gap between edges of the table and the edge of the page. How do I eliminate this?

Thanks,
Jeff

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%;
} 

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

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?

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

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

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

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.

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

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)

..never mind!

Hi folks,

Here's the comp that I'm trying to port over as strictly css/xhtml:
http://www.buyblue.org/stg/images/layout1c.gif

username:buyblue
pass:letmein

It's a comp built to fit an 800x600 resolution, however I'm developing it to be a liquid site.

And here's the ongoing attempt:
http://www.buyblue.org/stg (same user/pass if you need it)

As you can see, it's a work in progress.

Here's my problem. I need to have the outer glow running down the sides of the content_container, so I created the leftimg and rightimg divs to have a bg image of each respective sides glow. Set them both to 25px, and I'm getting nothing here. Even if I did get it to work, I think this workaround would be a problem because it wouldn't stretch down to the size of the content_container div.

Since this is an elastic design, the faux background trick won't work, obviously, and I can't find anything on the web that even remotely touches on something like this.

Here's the basic structure of what's going on:
Code:
Code:

<div id="container">
 <div id="header"></div>
 <div id="leftimg"></div>
 <div id="content_container">
   <div id="sidebar-left"></div>
   <div id="main"></div>
   <div id="sidebar-right"></div>
 </div>
 <div id="rightimg"></div>
</div>
<div id="footer"></div>

Help would be much appreciated!

-jack

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

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html



The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

Hey all. I have not done a great deal of web development, and whatever I have done has been with tables. I have seen a great many debates on the whole table vs div topic, and so this time thought I'd put together a site with divs + css rather than tables + css. so I have a few questions. here is the very simple code I've got so far.

Code:

<?php include("header.php"); ?>

	<div id='container'>
		<div id='header'>
		Header
		</div>

		<div id='rootmenu'>
		menu
		</div>

		<div id='docbody'>

			<div id='content'>
			content
			</div>

			<div id='sidemenu'>
			side
			</div>

		</div>
	</div>
	<div id='footer'>
	Footer
	</div>

<?php include("footer.php"); ?>

and the css file:

Code:

html, body
{
	height:100%;
}

#container
{
	width: 100%;
	height: 100%;
	margin: 0 auto 0 auto;
	margin: 0px auto 0px auto;
}

#header
{
	height: 10%;
	width: 70%;
	background: #000;
	margin: 0px auto 0px auto;
}

#rootmenu
{
	width: 70%;
	background: #fff;
	margin-bottom: 5px;
	margin: 0px auto 0px auto;
}

#docbody
{
	width: 70%;
	height: 85%;
	padding: 0px;
	margin: 0px auto 0px auto;
}

#content
{
	height: 100%;
	width: 80%;
	background: #45f;
	float: left;
}

#sidemenu
{
	height: 100%;
	width: 15%;
	background: #56f;
	float: right;
}

#footer
{
	width: 70%;
	background: #333;
	margin: 0 auto 0 auto;
}

most of this is based on code I've been looking at on sites like oswd.org. I would just like to know that I'm on the right track with my divs and css before putting too much work into the site. it always sucks to realise a serious design flaw at a later time. so please, could I get some suggestions on what I need to change and any important things I should know? cheers.

Hey guys. I've been looking for this site that I should have bookmarked when I found but have lost. I can TRY and describe it as best I can.

The main background color was white with, depending on the style you've set, a glass of wine or mug of beer fairly large in size and with a low opacity.

The styles were simple. Purple or yellow. Wine or beer. Mostly black text. I forget how it was you were able to change them, but he used it in some examples.

The menu had list items similar to the naving convention:
liquid 2 column nf
fixed 3 column nfnh
liquid/fixed 3 column
etc.

The header was the whole wording of whatever the menu items were.

Each page he showed examples using css, xhtml and sometimes javascript with the code on the page.

At the bottom of each example it had a group for user comments. Some were empty.

I don't remember any logos at all on the site other than the wine and beer. I think the url was something like: www.site.com/nameNO~/

I found it the same day I found the "seabold why tables are stupid" site. I remember reading a solution to a problem that I've encountered but I don't remember the code, I was just skimming the site. I tried finding other solutions, or the same solution somewhere else with no luck.

Thanks