|
CSS - Ie Vs Mz Div Problem With Content/vertical Repeat
Hi,
I'm polishing off a template for my Rugby League Club and using Etomite Content Management System behind it. Its designed for IE and MZ in anything from 800x600 and up. I have two problems both relating to non appearing vertical background repeats. This is the template body, find it live he http://parkesproperties.com/dublin_.../index.php?id=1 Code: <body>
<span id="header"></span>
<div id="main_container">
<div class="newsarea">
<div class="text">[*content*]</div>
</div>
<div class="menuarea">
<div class="welcomeBar"></div>
<div class="greenLeft">[*content3*]</div>
<div class="blueRight">[*content4*]</div>
<div class="blueLeft">[*content5*]</div>
<div class="greenRight">[*content6*]</div>
</div>
</div>
<span id="footer"></span>
</body>
The both problems are evident in MZ and not IE for this first page. The main <div> main_container won't recognize the nested divs as content for the sake of the background repeat-y. This works fine in IE. Has anyone an idea of a work around for this? The second problem can be seen at the bottom of the page in MZ and in both browsers http://parkesproperties.com/dublin_...index.php?id=25 Because I require the height to be larger in the newsArea <div> than in the menuArea <div>. CSS Files: http://parkesproperties.com/dublin_blues/base_ie.css http://parkesproperties.com/dublin_blues/base_mz.css All help is appreciated!! Thanks Denis Similar TutorialsHello I hope this isnt a stupid questions but here goes. I have a page designed with vertically centered content It works fine but if you view the page in a smaller screen size some of the content disapears in to the menu area of the browser. Its hard to explain but if you use the sorce code below and view it in any broswer. Make it so the browser is not maximized and then change the height of the window until the scroll bar appears ... you will notice that some of the conent goes into neverland before the srollbar appears. Line 1 disapears and can not be reads. This will be an issue for people viewing my site in 800x600 Thoughts? Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#horizon {
background-color: transparent;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -200px;
text-align: center;
min-width: 900px;
}
#wrapper {
background-color: #fff;
position: relative;
text-align: left;
width: 900px;
height: 380px;
margin: 0px auto;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="horizon">
<div id="wrapper">
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>
</div>
</body>
</html>
I have a site which uses a centred frame DIV for its content, as achieved by the normal technique of: margin-left: auto; margin-right: auto; with the text-align: centre/text-align: left workaround for IE. The problem is that some pages are longer than the viewport, resulting in an overall vertical scrollbar. On those pages, In Firefox, Mozilla, and Opera, the content is centred in the space which remains after the vertical scrollbar is in place. This means that, when moving from a short page to a long page, or vice-versa, the whole page content moves from side to side. This does not happen in IE. To see what I am talking about, go to the following page: http://www.clearsight.info/demo/index.php?pageId=5 Click on the top link in the main text frame ("The Lindisfarne window"), and then go back and forth between the two pages. No problem in IE, but in FF/Moz/Opera, the page dances before your eyes. Is there any way around this? Thanks Tom Please look at the carousel at the bottom of this page - www.mts-diesel.com What I would ultimately like to do is have it such that each image is vertically centered in the yellow box? Can this be done w/out use of a table cell? Thanks. Tom There are floods of threads pertaining to vertical aligning so I hope i'm not assaulted for asking this How would I go about vertically align content inside of a floating div with a fixed width and height. This is what I have so far. http://section31.us/temp/gallery/images.htm I obviously would like to have those images vertically aligned, can anyone help? Hey, I have been looking EVERYWHERE for a solution and there seems to be none just quite yet. I've searched google and all sorts of help forums... and still zip, nothing. What I want to do is vertically-align the text in this example: http://www.tri-m.com/test.html in the middle of the white space. The problem though is that there is an unknown height of the whitespace because I want it to be that no matter what size you size the window, the content will always be vertically aligned... so I'm pretty stuck on how to do this. I'm needing the solution for this desperatly and I have been searching and trying everything for weeks. If anyone could help that would be VERY VERY apperciated. Thank you sooo much to everyone that tries this out. Once again here is the Example: http://www.tri-m.com/test.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tri-M Systems INC.</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
color:#000;
}
#container-page {
background:#fff;
width:100%;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */
position:relative;
text-align:left;
margin:0 auto;
}
#container-head
{
background:#fff;
}
#header
{
background-color:#0000FF;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:81px;
position:relative;
}
#container-content
{
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
text-align:center;
position:relative;
padding: 0 0 162px 0;
}
#container-content:after
{
height:0;
clear:both;
display:block;
content:".";
visibility:hidden;
}
#content-sec ul,#content-sec ul li {
list-style: none none;
}
#container-foot
{
background-color:#ff0000;
width:100%;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:162px;
position:absolute;
bottom:0 !important;
bottom:-1px; /* For Certain IE widths */
}
#foot
{
height:162px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-head">
<div id="header">
</div><!-- END "header" -->
</div><!-- END "container-head" -->
<div id="container-content">
<center>
<div id="box">VERTICAL ALIGN THIS IN WHITE SPACE</div> <!-- END "box" -->
</center>
</div><!-- END "container-content" -->
<div id="container-foot">
<div id="foot">
</div><!-- END "foot" -->
</div><!-- END "container-foot" -->
</div><!-- END "container-page" -->
</body>
</html>
- Jacenta I am having a problem with back-ground repeat, it works fine in IE7 and most browsers except IE6 and lower, im not sure what to do? Website is: http://www.artandcraftsdirect.com/ Hello, I have two errors with the repeat background but i need to use this. How can i get round this? Cheers. Hello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? I would like a column to span the entire page vertically. When I browse my website on firefox, the page spans twice as long as the page. (www.skysupplyusa.com/a.php) Any advice? Code: #sidebar {
float: left;
background-color:#000;
width: 20%;
height: 100%;
}
#content{
background-color:#FFF;
width: 80%;
min-height: 100%;
height:auto;
float: right;
text-align:left;
}
/* Hack for IE */
* html #Content {
height: 100%;
}
/* End IE Hack */
body {
top:0;
height: 100%;
width: 100%;
margin: 0;
padding:0;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
background-color: #DDD6CC;
}
Hi, Why there is such a big vertical space between table and element (div class="frm_container) in Internet Explorer 6. There is no space like that in Mozilla Firefox. What can I do about it? Thank you. Code:
<head>
<title>Title</title>
<style type="text/css">
.frm_container {
padding: 0px;
margin: 0px;
border: 1px solid #000;
background-color: #fff;
}
</style>
</head><body><div class="frm_container">
<form name="register" enctype="multipart/form-data" method="post" >
<table><tr>
<td align="right">Username:</td><td><input type="text" name="user" /></td>
</tr></table>
</form></div></body></html>
Hi. So I'm trying to get the image div to vertical-align against the text div, within a wrapper div. It currently works fine in Firefox and IE8, but in IE7 and below it displays wrong. I tried to make it work on IE using some workarounds I found but I managed to make it worse. Can anyone help me adapt this code so it works on both firefox AND IE6+ ? Much appreciated! Thanks! Code (since I can't link to it...): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
div {
border: solid 1px black;
}
.wrapper {
padding: 10px;
display: table;
}
.image {
width: 100px;
vertical-align: middle;
display: table-cell;
}
.text {
margin-left: 100px;
padding-left: 10px;
display: table-cell;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="image">
<img src="" alt="Test Image">
</div>
<div class="text">
Foo bar Foo bar Foo bar Foo bar Foo bar<br>
Foo bar Foo bar Foo bar Foo bar Foo bar<br>
Foo bar Foo bar Foo bar Foo bar Foo bar<br>
Foo bar Foo bar Foo bar Foo bar Foo bar<br>
Foo bar Foo bar Foo bar Foo bar Foo bar<br>
</div>
</div>
</body>
</html>
Hi guys, I've got a table cell in which I want to display two pieces of text - one aligned top left, one aligned bottom right. Now, I can't for the life of me get the one to align to the bottom right. I can align the first bit of text to the top left fine, just not the second to to the bottom right. At the moment I've got this code: Code:
<html>
<head>
</head>
<body>
<table width="350" height="112" cellspacing="0" cellpadding="0">
<tr>
<td style="vertical-align: top" background="templates/<?=$templatedir?>/images/domain_box_05.gif" width="350" height="112">
<div style="height: 56px; padding: 10px 0px 0px 20px; border: 1px; border-style: solid">
test1
</div>
<div style="height: 56px; border: 1px; border-style: solid">
[<a href="pricing.php" target="_blank" onClick='window.open("/pricing.php","pricing","width=475,height=415,status=yes,scrollbars=1,resizable=1");return false;'>
test2</a>]
</div>
</form>
</td>
</tr>
</table>
</body>
</html>
I've just got the borders on there at the moment to see exactly where the div's are for debug purposes. I've tried using vertical-align: bottom, but it just doesn't do anything. Any help would be greatly appreciated, thanks This might be a dumb question ... but here it is. I have a red background on my page and a simple table with one cell. I applied, via CSS, a 5 px border in white (border: 5px #fff solid and I want the bottom border to be black (border-bottom: 5px #000 solid but I didn't expected that result : the bottom border gets angular delimitation on both sides (see the link below). Sample of the table Here is the code used; CSS Code:
<style>
body
{
margin: 0;
padding: 0;
}
div.main
{
background-color: red;
height: 100%;
width: 100%;
}
.maintable
{
border: 5px #fff solid;
border-bottom: 5px #000 solid;
}
</style>
HTML Code: <body> <div class='main'> <br /><br /> <center> <table border='0' cellspacing='0' cellpadding='0' class='maintable'> <tr> <td>Cell #1</td> </tr> </table> </center> </div> </body> What I want, is a clean table that, if the border-bottom is declared AFTER the border statement, it will color ALL the bottom white to black, and if border-bottom is declared BEFORE the border statement, it will color the bottom border black except both sides (left and right) that will remain white. I don't want angular sides like the one in the link, I want horizontal or vertical sides only, is that possible? Thanks a lot. I've been toying with this for some time and I've been messing with it so long that I probably wouldn't see the problem if i was hit with a brick. Essentially the link posted is to an html page where I have a portion of the left side of my main page. This page will have vertically listed navigation which upon hover will slide out a panel and so on. I cannot seem to get the elements correct, the sliding out list items are correct but the other main listing is not sitting correctly, and the navigation box gets all elongated when I hover. This code and page is designed to work with IE 6x for work. Any help would be appreciated. Thanks. http://mcpherson-racing.com/dave/Slideout.htm Also I'm wondering if you see a problem with the page and the navigation that I'm attempting to make, Also if you have any design tips for this 'demo' I'd be happy to hear them.... I'm a bit lost on the 'footer' what to put there... http://mcpherson-racing.com/dave/demo2.htm The site isn't done, its about 30% so I know links are busted and not pointing to the right places. I have a vertical flyout menu setup on the left side of the page with the associated links arranged in vertical columns next to each menu selection. It is working fine 99% of the time but I am getting some reports that the vertical columns do not touch the main selection column so that when the user moves the cursor to the right to go to the selection list there is a break between the columns and the column disappears before a selection can be made. I have not been able to duplicate this on my IE8 and it works fine with Firefox. This makes it rather hard to trouble shoot so I am hoping someone else has had this problem and know what I am talking about. It seems to only happen to users with IE7 and IE8 but not most IE8 users. Is there perhaps some code I need to add to the CSS file that will solve this problem? THX I'm trying to implement bottom-to-top vertical text using CSS attributes in IE : writing-mode: tb-rl; filter: flipv fliph; But I have encountered the following: the text is displayed with a grey shadow (instead of anti-alias). It seems that the problem is caused by the "filter:flip" attribute. Does anyone have a work around? (If I write the same text without the "filter" attribute, the grey shadow disappears but my text is written top-to-bottom!) Here's my stylesheet: .verticaltext{ font-family: Arial; font-size: 13px; font-weight:bold; color:#FF9100; position:absolute; top:1px; height:90px; width: 16px; writing-mode: tb-rl; filter: flipv fliph; } and here's the HTML: <div class="verticaltext">Vertical Text</div> I have also tried to use other CSS3 attributes like: block-progression: ttb; direction : rtl; but they don't seem to work in IE. Does someone know how to remove the grey shadow or know of another way to implement the bottom-to-top vertical text? i have a vertical rollover menu which has odd shaped boxes, i'd like these to rollover without hiding those parts of the image that protrude. [IMG](URL address blocked: See forum rules)[/IMG] basically they have to butt up underneath each other, but not loose the outside top edges on the rollover state. i also want the text aligned right, but have a negative indent of 10 or so pixels. you'll see what I mean upon viewing the example. thanks in advance! current CSS; ul { list-style: none; margin: 0; padding: 0; text-align: right; position: relative; } ul a { display: block; width: 141px; height: 44px; line-height: 58px; text-decoration: none; background: url(../images/gif/menuOverA.gif) no-repeat left; } #home #menu .home a, #about #menu .about a, #choose #menu .choose a, #services #menu .services a, #health #menu .health a, #testimonials #menu .testimonials a, #contact #menu .contact a { background: url(../images/gif/menuOverA.gif) no-repeat right; cursor: default; color: White; } #menu a:hover { background: url(../images/gif/menuOverA.gif) no-repeat right; color: White; } #about #menu .about li { background-color: Aqua; } and html; <div id="menu"> <ul> <li class="home"><a href="index.html">HOME</a></li> <li class="about"><a href="aboutUs.html">ABOUT US</a></li> <li class="choose"><a href="whyChoose.html">WHY CHOOSE US</a></li> <li class="services"><a href="services.html">SERVICES</a></li> <li class="health"><a href="healthSafety.html">HEALTH & SAFETY</a></li> <li class="testimonials"><a href="testimonials.html">TESTIMONIALS</a></li> <li class="contact"><a href="contactUs.html">CONTACT US</a></li> </ul> </div> Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. Hello All, I'm currently trying to finish the main design for my church's website - and I'm having a problem with the #mainbody height. LINK TO SITE :: http:// update.gcmpg.com/ If I don't specify a height for #mainbody, it looks like this :: http:// img522.imageshack.us/img522/7663/noheight.png If I do specify a height for #mainbody (350px in this case), it looks like this :: http:// img716.imageshack.us/img716/5158/height350px.png Basically I'm trying to avoid having to specify a height for #mainbody on every page, it seems like a ridiculous notion to have to do so. I've tried the clearfix, but it doesn't work. and I'm having a brain fart. Thanks in advance for all the replies! Cheers! PS -don't mind the ugly graphics - they're just placeholders |
|||||||