|
HTML - How Do I Remove These Horizontal Scrollbars In Ie? Gahhh!
Hello again.
Thanks for the help with my website building so far.. I thought I'd make a new post for my latest question, once again, as I did not solve it. There must be a way to remove the horizontal scrollbar on my site, that is visible in ie browsers below 7, and who knows what more (I only have ie and firefox). In firefox it looks great, and fits itself nicely into the layer without a horizontal scrollbar in the content window. This happens in the following two pages: http://www.ionisationband.com/blog.php http://www.ionisationband.com/guestbook.php I understand that firefox reads and resizes these two to fit perfectly into the page, but ie below 7 does not. There must be some way to tell ie what firefox already can figure out by itself? This is really annoying me, and I would be very happy if someone could tell me HOW to do this for ie. Silje Similar TutorialsHi! Problems again.. On the following sites, the content makes a horizontal scrollbar in ie, but looks great in firefox.. what am I doing wrong..? It would be great to get a reply soon so that I can go in and hopefully fix this, as i am supposed to have it done by tomorrow.. I would be really really happy if anyone could help me out. please? http://www.ionisationband.com/blog.php and http://www.ionisationband.com/guestbook.php I don't know how this got here, but I don't have any absolute width defined anywhere, I'm viewing the site on 1280x800 resolution, and I have a horizontal scroll bar... have a look if you want. www.bkriegtech.net Thanks for any help... I'm trying to remove the horizontal scroll bar from a div but keep the vertical. I've seen a lot of posts on this but the answer is always: overflow-y:scroll;overflow-x:hidden but that won't work for me, because the x width does exceed the page, so I don't want to hide, I want to rely on the page's native horizontal scroll bars. (The reason being, I have a 'fixed/frozen' header div above which the offending div needs to stay in sync with) I have a div that currently has standard scroll bars on it. However I would like to replace them with custom scroll bars or a button at the top and bottom which moves the text contained within it up and down. It must be compatible with Firefox. Does anyone have any suggestions or know an internet reference that I can look at to get some ideas? I am working on a site, he http://www.cliffmccormick.com/New/content.html If you open it in Firefox, it is PERFECT, exactly the way I want it to look and act. BUT... open it in IE and all of the sudden there is a Horizontal Scrollbar, the Picture and Links don't stay in place like in Firefox, and I can not figure out what I need to change. Can anyone help me correct the code, so that it looks in IE the same as it does in Firefox? The problem only pertains to IE6 and below, it works fine in IE7. Even though i have 122 post html is a maze to me HTML Code: <STYLE type="text/css">
<!--
BODY
{
scrollbar-face-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #000000;
}
-->
</STYLE>
<p> </p>
<p> </p>
</body>
</html>
Hi everyone, I really don't know much about this topic, so I'd like some advice. I need to add some scrollbars to an iframe. They can be anything except the OS's scrollbars. As long as I can change the color or the shape or something to customize them that is great. Also, I read that this can only be done on IE. Is it possible to do it on other browsers. I also heard that it is possible through Flash? Does anyone know how I can do this? Thanks Solved by myself. Hi all, Here's what I'm looking for, ideally. I want a page to open and on load, I want it to open to a certain size and disable its scrollbars. I can get the resizing working, but how do I disable the scrollbars? <body onLoad=" window.resizeTo(1300, 1000)"> Thanks! JennyjJo How can I fixed the size of the page to desired width and length and also make that page fixed to that size so that it cannot resized. And also I want to disable all bars(scrollbars, menubars, address bars etc) for the page. I am using these codes for my projects and these are for commercial purpose. I am also asking for your permission to use these codes for my projects. lookin 4wrd. Please help: I don't know how to remove the gap above the '50 Self-Help Classics' image to the left of the other two images on http://www.butler-bowdon.com/index.html Also need a uniform space between the book image and 'Also available on audio' like the other two. Thanks anyone! hi all, im having a bit of a problem displaying a list horizontally, and its really getting a bit frustrating. as far as i can see, it should be a case of using display:inline on the li tags, but so far no luck. ive included my css below: Code: #navigation ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
#navigation ul li
{
display:inline;
}
#navigation ul li a
{
display:block;
width:90px;
height:30px;
color:#fff;
text-align:center;
text-decoration:none;
}
#navigation ul li a:hover
{
background-color:#EF4252;
}
and my html: Code: <td id="navigation"> <ul > <li> <a href="contact.html" >Contact Us</a> </li> <li> <a href="wwd.html" >What We Do</a> </li> </ul> </td> any help would be appreciated. thanks Can't tell you how many hours I've spent trying to do this, but it's a lot! An example page with the issue can be found here.. http://www.funkimunkibadges.co.uk/geekybadges-c-79.html I'm basically trying to change it to be a horizontal scroll instead of vertical. Top image here is what happens when I expand the data in the central box. The lower image is when is as it is now.. http://www.flickr.com/photos/creepyd/5710648997/ I'm not really sure where the problem lies, my guess is the html. The piece of CSS which creates the vertical scrollbar is here.. Code: #indexProductList.centerColumn {
width: 630px ;
height: 680px !important; /*CENTER SCROLLBAR HEIGHT*/
overflow:auto;
padding:0px;
If I change the 'auto' above to 'hidden', the scrollbar goes away, so it's definitely that controlling it. The php which creates the 5 columns is here.. If I change it to + 0.5, the last one will wrap to the next line, and not create a horizontal scrollbar. However if I change it so each column is more than 100%, I get a horizontal scrollbar?! Code: $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5; Thanks so much for any help. Here's the html for the central table with the normal vertical scrollbar in place.. HTML Code: <td valign="top">
<!-- bof breadcrumb -->
<div id="navBreadCrumb"> <a href="http://www.funkimunkibadges.co.uk/">Home</a> ::
Careers & Hobbies
</div>
<!-- eof breadcrumb -->
<!-- bof upload alerts -->
<!-- eof upload alerts -->
<div class="centerColumn" id="indexProductList">
<h1 id="productListHeading">Careers & Hobbies</h1>
<div id="indexProductListCatDescription" class="content"> </div>
<form name="filter" action="http://www.funkimunkibadges.co.uk/index.php?main_page=index" method="get"><label class="inputLabel">Filter Results by:</label><input type="hidden" name="main_page" value="index" /><input type="hidden" name="cPath" value="113" /><input type="hidden" name="sort" value="20a" /><select name="alpha_filter_id" onchange="this.form.submit()">
<option value="0">Items starting with ...</option>
<option value="65">A</option>
<option value="66">B</option>
<option value="67">C</option>
<option value="68">D</option>
<option value="69">E</option>
<option value="70">F</option>
<option value="71">G</option>
<option value="72">H</option>
<option value="73">I</option>
<option value="74">J</option>
</select>
</form>
<br class="clearBoth" />
<div id="productListing">
<div id="productsListingTopNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingTopLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"><img src="images/Be Nice Im In Charge Of The Pills.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"><img src="images/Best Scrabble Player Ever.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"><img src="images/Bowling Cutie.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"><img src="images/Bowling Cutie Black.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"><img src="images/Bowling Pins And Ball Red.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"></a><br /><br /></div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"><img src="images/Bowling Princess.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"><img src="images/Bowling Rocks.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"><img src="images/Bowling Strike.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"><img src="images/Camera On Blue.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"><img src="images/Camera On Pink.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"></a><br /><br /></div>
<br class="clearBoth" />
<div id="productsListingBottomNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingBottomLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
</div>
</div>
</td>
Hi. I'm making a page for a company. And I'm having trouble regarding an iframe, ONLY comes to place when viewed in Explorer. I'm so tired of finding problems ONLY because of IE. This is the second time so far, spent an entire week just because of some minor code problems showing up ONLY when viewed in IE. Anyway, my trouble is an irritating horizontal scroll showing up at the bottom of the one iframe. The URL is http://www.risington.no/dynamikk I have checked that the contents of the page linked to the iframe ain't wider than the iframe itself. Actually, I've tried to even set half of the size it is now, and still I'm getting the scrollbar at the bottom. I'm running out of posibilities here, necer experienced such big a problem on behalf of this. I had thos problem a couple of times before, but allways solved by subtract about 15 px width off the content page shown in the iframe because of the VERTICAL scrollbar showing up, which actually is quite important that it does. But not this time, no! Here's a cut-out of how my iframe tag looks like: Code: <iframe src="news.html" width="677" height="478" align="middle" frameborder="0" marginheight="0" marginwidth="0" name="mainframe" scrolling="auto" title="Dynamikk"></iframe> It's inside a <td colspan="2"></td> with no static width or height. Any help = Grateful With the "horizontal rule", is it possible to write over it? The reason I am asking is because I saw an example of a horizontal rule, and it reminded me of a footer. Are they used for footers if some cases? Cheers guys (and I apoligize for all the questions). How do I make two links next to each other? Here's the site: http://celticsinsider.webs.com Where it says "Submit An Article", I would like a couple links next to it. Here's my html code and css code: Code: *{
margin:0px;
padding:0px;
}
img{border:0px;}
html{
width:100%;
height:100%;
background-color:#030303;
}
body{
width:869px;
padding:0 65px;
margin:0 auto;
height:100%;
position:relative;
}
html > body{
height:auto;
min-height:100%;
}
#top{
width:869px;
height:70px;
background-image:url(images/menu_bg2.gif);
background-position:top left;
background-repeat:repeat-x;
}
#menu{
width:869px;
height:70px;
background-image:url(images/top_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
}
#menu ul{
background-image:url(images/menu_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
height:42px;
width:768px;
margin:0 auto;
}
#menu li{
height:34px;
float:left;
list-style-type:none;
padding:8px 9px 0 13px;
}
#menu li a{
display:block;
height:34px;
float:left;
}
.but1{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but1.jpg);
}
.but2{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but2.jpg);
}
.but3{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but3.jpg);
}
.but4{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but4.jpg);
}
.but5{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but5.jpg);
}
.but6{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but6.jpg);
}
.but7{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but7.jpg);
}
.but1:hover,.but2:hover,.but3:hover,.but2:hover,.but4:hover,.but5:hover,.but6:hover,.but7:hover{background-position:bottom left}
#active{
background-position:bottom left
}
#header{
width:869px;
background-image:url(images/photo.jpg);
background-position:top left;
background-repeat:no-repeat;
}
.home{
padding:240px 0 0 0
}
.gallery{
width:852px;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
padding:13px 0 8px 17px;
background-color:#0F0F0F;
overflow:hidden
}
.gallery div{
float:left;
margin:0 5px 0 0;
}
.gallery div p{
display:block;
background-color:#1F1F1F;
border-bottom:1px solid #383838;
line-height:16px;
text-align:center;
width:65px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#5E5E5E
}
#wrapper{
width:869px;
padding:6px 0 90px 0;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#9A9A9A;
}
.style1{
margin:8px 0 0 0;
}
#content{
width:869px;
background-color:#090909;
overflow:hidden;
padding:0 0 28px 0;
background-image:url(images/wrapper_bg.gif);
background-position:bottom left;
background-repeat:no-repeat
}
.title{
padding:11px 0 0 0;
height:26px;
margin:0 0 8px 0;
background-image:url(images/title_bg.gif);
background-position:top left;
background-repeat:no-repeat;
}
#left{
width:442px;
float:left;
padding:0 24px 0 17px
}
#left div{
padding:15px 0 0 0;
width:221px;
float:left;
}
#left p{
width:192px;
padding:13px 0 0 0
}
.more{
display:block;
color:#AE2A00;
text-decoration:underline;
margin:2px 0 0 0
}
.mo visited{text-decoration:underline}
.mo hover{text-decoration:none}
.block{
width:368px;
padding:12px 0 10px 1px;
overflow:hidden
}
.block img{
float:left;
border:1px solid #383838;
margin:0 11px 0 0
}
.block span{
background-color:#000000;
line-height:14px;
color:#29705B;
padding:0 15px 0 5px;
margin:2px 0 8px 0;
display:block;
float:left;
}
.block p{
float:left;
width:200px;
}
#footer{
width:869px;
position:absolute;
bottom:0px;
height:77px;
background-color:#0F0F0F;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
font-family:Tahoma, sans-serif;
color:#9A9A9A;
font-size:10px;
}
#footer ul{
width:768px;
height:13px;
background-image:url(images/bot_bg.gif);
background-position:top left;
background-repeat:no-repeat;
width:768px;
height:13px;
margin:20px auto 15px auto;
text-align:center
}
#footer ul li{
display:inline;
}
#footer ul li a{
color:#9A9A9A;
text-decoration:none;
margin:0 9px;
}
#footer ul li a:visited{text-decoration:none}
#footer ul li a:hover{text-decoration:underline}
#footer p{
width:869px;
text-align:center;
font-size:11px;
}
#footer p a{
color:#CE3200;
text-decoration:none
}
#footer p a:visited{text-decoration:none}
#footer p a:hover{text-decoration:underline}
#about{
width:412px;
float:left;
padding:0 21px 0 17px;
}
.pic{
margin:17px 15px 18px 15px;
border:1px solid #383838
}
#about p{
width:375px;
margin:0 0 15px 15px
}
#history{
width:404px;
float:left
}
#history p{
width:375px;
padding:18px 0 0 0
}
#nav {
font-family: Verdana, Arial, sans-serif;
font-size: small;;
padding:5px;
margin:0px;
background-color:#090909;
color:#fff;
border-bottom: 1px solid #090909;
}
#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}
Hi everyone, http://www.eveningtweed.com/laura At the above site, I've got a div called 'work' which needs to contain a long line of images which I want users to horizontally scroll through using the DIV scrollbar. I've looked through countless forum posts and solutions on Google but nothing works. Can anyone tell me why this won't scroll horizontally and how to achieve it? Current CSS for the DIV: Code: .work {
border:0px;
height:350px;
overflow-x:scroll;
overflow-y:hidden;
width:100%;
}
Thanks in advance, Jez. Hi, How can I create a row of images with a horizontal scrollbar? I'd be really grateful to your help! Regards Rain Lover I dont know how to explain it better but how do i do this http://www.target.com/Movies-MMB/b/r...ode=1259488011 so at the bottom of my page i can add 4 to 5 different products and allow for those left and right buttons show more... any direction would help thanks I'm new to HTML/XHTML, so thanks for helping me understand the spacing rules that are applying he HTML: Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact and Networking</a></li> </ul> </div> CSS: Quote: #nav { height: 37px; text-align: center; background-color: #858585; } #nav ul { margin: 0; } #nav li { display: inline; } #nav a { padding: 9px 12px 9px 12px; line-height: 38px; border-left: 1px solid black; } Between every link in my horizontal navigation menu, there is a space (which I don't want). In order to get rid of this space, I have to change my HTML code to... Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li><li><a href="resume.html">Resume</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="contact.html">Contact and Networking</a></li> </ul> </div> ...which in turn sacrifices readability. This all seems very counter-intuitive to me, since I was under the impression that I could format my code readably without having to worry about its presentation. I can only guess that my line breaks (textual line breaks, not actual <br /> tags) are being interpreted as white space within my <ul>. If this is the case, my only other option would be to display my <li>s as block elements with zero margins, float them, and then use margins to push them to the middle (which is all WAY uglier than being able to center them with text-align). This is how I understand what's going on. If I am correct, does this mean I'm forced to sacrifice readability for functionality? |
|||||||