Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ie has a border on the edges of the screen

Status
Not open for further replies.
Jul 28, 2011
167
NG
Hi all,

I'm working on a site that requires that I remove the scroll bars, margin and padding from the page.

I did this:

body,html
{
overflow: hidden; width:100%;
border:0; padding:0; margin:0;
}

However, I noticed that the page/screen removed the scroll bars but still has a funny looking border on the edge of the screen which does not give me the final feel I want in IE.

What can I do?

____________________
Men put up a strong face just to cover their weaknesses...good!
But a smile makes them live longer....
Which would you choose?

Think about it.
 
Give an example (the link to the site, perhaps)

-Geates

"I hope I can chill and see the change - stop the bleed inside and feel again. Cut the chain of lies you've been feeding my veins; I've got nothing to say to you!"
-Infected Mushroom

"I do not offer answers, only considerations."
- Geates's Disclaimer
 
I'm sorry but it is an intranet site; not on the internet...and I dont know how to upload a file here - else I could have given a screen-shot

____________________
Men put up a strong face just to cover their weaknesses...good!
But a smile makes them live longer....
Which would you choose?

Think about it.
 
Use an image sharing site like photobucket, and just paste the image link here surrounded by an img tag.

[ignore]
image.jpg
[/ignore]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
But the thing is this, on a fresh page, when you do

body,html {
overflow: hidden; width:100%;
border:0; padding:0; margin:0;
}

you ought to get a page with no padding, no margin, no scroll bars and no border.
Now, padding is removed, margin is removed, scroll bars are removed, but you get a border around the page.
I've been trying to remove it without success

____________________
Men put up a strong face just to cover their weaknesses...good!
But a smile makes them live longer....
Which would you choose?

Think about it.
 
We still need to see what you are seeing. What the border looks like exactly.
Also the rest of your code would be helpful, as can't seem to reproduce the problem with just the provided code.

What doctype if any are you using?

What version of IE?


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
does the page have a DOCTYPE? An absence of a DOCTYPE will cause pages to be rendered unexpectedly.

-Geates

"I hope I can chill and see the change - stop the bleed inside and feel again. Cut the chain of lies you've been feeding my veins; I've got nothing to say to you!"
-Infected Mushroom

"I do not offer answers, only considerations."
- Geates's Disclaimer
 
screenShot.png


Attached is the screenshot. I'm using IE8 and it shows up thesame way in ie6 to ie9. you may need to download it first to see it properly.

I'm actually using a master page in vb.net

I have a doctype thus
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
here' the master page:
Code:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="admin_MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
    <link rel="SHORTCUT ICON" href="images/fav.png" type="image/x-icon" />  <!--Image for site-->
    <title>:: Cummins Westafrica Limited ::</title>
	<script src="[URL unfurl="true"]http://code.jquery.com/jquery-latest.min.js"[/URL] type="text/javascript"></script> <!--Get JQuery-->
	<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"[/URL] type="text/javascript"></script> <!--JQuery UI -->

    <link rel="Stylesheet" href="StyleSheet2.css" /> <!--Style for all pages-->
    
    <link rel="stylesheet" href="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"[/URL] type="text/css" media="all" />
	<link rel="stylesheet" href="[URL unfurl="true"]http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css"[/URL] type="text/css" media="all" />
    <link href="styles/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scmMaster" runat="server">
    </asp:ScriptManager>
    <div><!--Form div starts here-->
        <div id="header"><!--Header div starts here-->

            <table width="100%">
                <tr>
                    <td>
                        <img alt="Cummins Logo" src="images/cumminswal.png" style="width: 158px; height: 69px" /></td>
                    <td align="right" valign="bottom">
                        <div></div>
                        <asp:LoginView ID="LoginView1" runat="server">
                            <LoggedInTemplate>
                                Welcome: 
                            </LoggedInTemplate>
                            <AnonymousTemplate>
                                Welcome: 
                            </AnonymousTemplate>
                        </asp:LoginView>
                        <asp:LoginName ID="LoginName1" runat="server" />
                        <asp:LoginStatus ID="LoginStatus1" runat="server" 
                            LogoutAction="RedirectToLoginPage" LogoutPageUrl="~/Default.aspx" />
                    </td>
                </tr>
            </table>
        </div><!--Header div ends here-->
        <div class="content">
            
                <table width="100%" frame="vsides" style="background:#FF0000;">
                    <tr>
                        <td class="mainTableCell" valign="top">
                            <div class="eachContentDiv">
                                <asp:Panel ID="pnlAfterMarket" runat="server">
                                    <ul>
                                        <li><asp:HyperLink ID="hypAccounts" runat="server" 
                                        NavigateUrl="~/Accounts/Default.aspx">Accounts</asp:HyperLink></li>
                                        <li>
                                        <asp:HyperLink ID="hypAfterMarket" runat="server" 
                                            NavigateUrl="~/afterMarket/Default.aspx">After Market</asp:HyperLink>
                                        </li>
                                        <li><asp:HyperLink ID="hypFinance" runat="server" 
                                            NavigateUrl="~/Finance/Default.aspx">Finance</asp:HyperLink>
                                        </li>
                                        <li><asp:HyperLink ID="hypPurchase" runat="server" 
                                            NavigateUrl="~/Purchase/Default.aspx">Purchase</asp:HyperLink>
                                        </li>
                                        <li><asp:HyperLink ID="hypSales" runat="server" NavigateUrl="~/Sales/Default.aspx">Sales</asp:HyperLink>
                                        </li>
                                        <li><asp:HyperLink ID="hypHR" runat="server" NavigateUrl="~/HR/Default.aspx">HR</asp:HyperLink>
                                        </li>
                                   </ul>
                                </asp:Panel>
                                <br />
                                <asp:Panel ID="pnlUserDetails" runat="server">
                                    <ul>
                                        <li><asp:HyperLink ID="hypFiles" runat="server" NavigateUrl="~/Files.aspx">Files</asp:HyperLink>
                                    </li>
                                        <li><asp:HyperLink ID="hypQuestionaire" runat="server" 
                                        NavigateUrl="~/Questionaire.aspx">Questionaire</asp:HyperLink>
                                    </li>
                                    <li>
                                    <asp:HyperLink ID="hypCreateUser" runat="server" NavigateUrl="~/CreateNew.aspx"> Create New User</asp:HyperLink>
                                    </li>
                                        <li><asp:HyperLink ID="hypChngPwd" runat="server" 
                                        NavigateUrl="~/password.aspx?q=pwd_cng">Change Password</asp:HyperLink></li>
                                   </ul>
                                </asp:Panel>
                            </div>
                        </td>
                        <td width="*" valign="top">
                            <div style="padding:10px;">
                                <asp:ContentPlaceHolder id="mainContent" runat="server">
                                    
                                        Main Content
                                   
                                </asp:ContentPlaceHolder>
                            </div>
                        </td>
                        <td class="mainTableCell" valign="top">
                            <asp:UpdatePanel ID="udpMasterCal" runat="server">
                              <ContentTemplate>
                                   <div class="eachContentDiv">
                                      <asp:Calendar ID="calSiteCalender" runat="server" BackColor="#FFFFCC" 
                                           BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" 
                                           Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" 
                                           ShowGridLines="True" Width="220px">
                                          <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                                          <SelectorStyle BackColor="#FFCC66" />
                                          <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                                          <OtherMonthDayStyle ForeColor="#CC9966" />
                                          <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                                          <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
                                          <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" 
                                              ForeColor="#FFFFCC" />
                                       </asp:Calendar>
                                   </div>
                            </ContentTemplate>
                           </asp:UpdatePanel>
                        </td>
                    </tr>
                </table>
            
        </div>
        <div id="footer">
            <div class="spacing">
                <ul class="for_footer">
        	            <li><asp:HyperLink ID="hypGeneral" runat="server" NavigateUrl="~/Welcome.aspx">Home</asp:HyperLink></li>
        	            <li><a href="#">About Us</a></li>
        	            <li><a href="#">Contact</a>
                              <ul>
                                    <li><a href="#">Contact Us</a></li>
                                    <li><a href="#">Feedback</a></li>
                              </ul>
                        </li>
	            </ul>            
              </div>
              <br /><hr style="clear:both" />
              <div class="spacing">
              Copyright<sup>&copy;</sup> 2011, Cummins WestAfrica Limited. All rights reserved. Any duplication, transfer or manipulation
              <asp:ImageButton ID="imbfireLoseFocus" runat="server" AlternateText="" Width="5px" />
              <br /><br />
              </div>
          </div><!-- footer stuffs ends--->

    </div><!--Form div ends here-->
    </form>
</body>
</html>
and one of the pages
Code:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Files.aspx.vb" Inherits="Files" title=":: Cummins Westafrica Limited - Files ::" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="mainContent" Runat="Server">
<style type="text/css">
    .alignCellRight{ text-align:right;}
</style>
    <asp:Panel ID="pnlUploadFile" runat="server" Visible="False">
        <asp:Label ID="lblMsg" runat="server"></asp:Label>
        <br />
        <br />
        <br />
        <table style="width: 100%">
            <tr>
                <td class="alignCellRight">Docunent No</td>
                <td><asp:TextBox ID="txtDocType" runat="server"></asp:TextBox></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="alignCellRight">File to upload</td>
                <td><asp:FileUpload ID="myFile" runat="server" /></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="alignCellRight">Description</td>
                <td><asp:TextBox ID="txtDesc" runat="server" TextMode="MultiLine"></asp:TextBox></td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><asp:Button ID="btnUpload" runat="server" Text="Upload New" /></td>
                <td>&nbsp;</td>
            </tr>
        </table>
        <br />
    </asp:Panel>
    
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        AllowPaging="True" CellPadding="4" 
    ForeColor="#333333" GridLines="None" EnableViewState="False" Font-Size="11px" 
        rules="cols">
        <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
        <Columns>
            <asp:HyperLinkField DataNavigateUrlFields="Id" DataNavigateUrlFormatString="~/Files.aspx?type=download&Id={0}" Text="Download" />
<asp:HyperLinkField DataNavigateUrlFields="Id" 
                DataNavigateUrlFormatString="~/Files.aspx?type=del&amp;Id={0}" Text="Delete"></asp:HyperLinkField>
        </Columns>
        <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
        <AlternatingRowStyle BackColor="White" />
    </asp:GridView>

</asp:Content>
then the css
Code:
body,html 
{
	overflow: hidden; width:100%;
	border:0; padding:0; margin:0;
	font:0.8em arial ;background:Red;
}
a{color:black;}
/* Header stuffs */
#header
{
	position:fixed; top:0;
	background:#000; width:100%; color:White;
	border:2px #600 solid;
}
#header a
{
	color:Fuchsia;
}
/* Header stuffs Ends */
/* Content stuffs */
.mainTableCell{width:20%}
.printOutHeader{ display:none;}
#theform{display:block;}
#thePrint{display:none; background:#fff;}
.content
{
	margin:auto; overflow:auto; width:100%;
	position:fixed;
	top:95px; bottom:90px;
	behavior: url(PIE.htc);
}
.cummins{ color:#FFF; font-weight:bold;}

.eachContentDiv
{
	background:#F0F0F0; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;
	border:1px solid #FFF; min-height:500px; padding:10px;
	
}
.eachContentDiv ul
{
	width:100%; list-style:none; margin:0;padding:0;
}
.eachContentDiv ul li
{
	width:100%; text-align:left; top: 0px; left: 11px; background:#E8E8E8;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border:1px solid #FFF;
	-webkit-box-shadow: #666 0px 2px 3px;
	-moz-box-shadow: #666 0px 2px 3px;
	box-shadow: #666 0px 2px 3px;
}              
.eachContentDiv ul li:hover
{
 background:#A8A8A8;
}              
.eachContentDiv ul li a
{
	display:block;
	text-decoration:none;
	color:#000;
	padding:5px;
	border-bottom:0;
}              
            
.panelPadding{
	padding:10px;
}
.reportPadding1
{
	background:#333; padding:10px; border:2px #666 solid;
}
.reportPadding2
{
	background:#FFF; padding:10px; border:2px #000 solid;
}
#ui-datepicker-div{ font-size: 80%; }
/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }

/* Content stuffs Ends */
/* Footer stuffs */
#footer{
	clear:both; width:100%;
	background:#000;font-size:smaller;
	position:fixed; bottom:0;color:#CCC; max-height:90px
	/*visibility:hidden;*/
}
ul.for_footer{
	margin:0; padding:0;
	list-style:none;
}
ul.for_footer li{
	position:relative;
	float:left;
	width:130px;
	text-align:left;
	top: 0px;
	left: 11px;
}
ul.for_footer li ul{
	margin:0; padding:0;
	list-style:none
}
ul.for_footer li ul li{
	position:relative;
	width:150px;
	padding-left:10px;
	top: 0px;
	left: 11px;
	height: 18px;
}
ul.for_footer li a{
	display:block;
	text-decoration:none;
	color:#CCC;
	padding:5px;
	border-bottom:0;
}
ul.for_footer li ul a{
	padding:1px;
	font:"Comic Sans MS", cursive;
}
ul.for_footer li ul a:hover, ul.for_footer a:hover{
	color:#F00;
}
/* Fix IE. Hide from IE Mac \*/
* html ul.for_footer li {float: left; height: 1%;}
* html ul.for_footer li a {height:1%;}
/* IE Fix ends*/
ul.nav_list li:hover ul, ul.nav_list li:hover ul{
	display: block;
}
#footer .spacing
{
	width:800px; margin:auto; text-align:center
}

/* Footer stuffs Ends */
Hope it helps

____________________
Men put up a strong face just to cover their weaknesses...good!
But a smile makes them live longer....
Which would you choose?

Think about it.
 
Might it be the padding of the video toolbar?

-Geates

"I hope I can chill and see the change - stop the bleed inside and feel again. Cut the chain of lies you've been feeding my veins; I've got nothing to say to you!"
-Infected Mushroom

"I do not offer answers, only considerations."
- Geates's Disclaimer
 
Well, I could have guessed thesame but for the fact that it shows up on all other systems. Everything is well with firefox, chrome, and other standard browsers.
The challenge I'm having is that IE is the company standard!

____________________
Men put up a strong face just to cover their weaknesses...good!
But a smile makes them live longer....
Which would you choose?

Think about it.
 
Have a look at the document as it is seen by the browser (view content). It looks as if you may be sending something to the browser before the Doctype, which should be absolutely the first thing the browser sees. Check this article

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Actually pre-server .net code is of absolutely no use when debugging visual issues, neither are pictures.

A URI to the page is what is required.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Sorry ChrisHirst, but the site is an intranet site and not on the internet.
johnwm: when working with ASP.Net master pages, the <%Master....> tag appears before the doctype, but is not rendered at the final output to the browser. it is only for the server side engine to consume.

____________________
Men put up a strong face just to cover their weaknesses...good!
But a smile makes them live longer....
Which would you choose?

Think about it.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top