|
CSS - Bizarre Problem (copy And Paste)
hi
i've built a site for a client: http://www.ad-international.org/ using CSS for layout. it seems IE users (Mac and PC) can't copy and paste text from the site. it works fine in safari, mozilla and firefox. anyone come across this before? or have any solutions? i can't find anything on the web soi far... thanks dave Similar TutorialsHere is my entire code causing this bug. I have simplified it considerably from the actual code where I am experiencing the problem. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Lorem ipsum dolor sit amet & Lorem ipsum dolor sit amet</title>
<style type="text/css" media="screen">
div#page {
position: relative;
}
div#branding-main {
position: absolute;
bottom: 14px;
left: 9px;
}
</style>
</head>
<body>
<div id="page">
<div id="branding-main"><a href="#"><img src="https://secure.footprint.net/xscmsn/c/hotmail/hotmail77x19.gif" width="130" height="120" alt="" /></a></div>
<div id="main">
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <img width="276" height="110" src="http://www.google.com/intl/en_ALL/images/logo.gif" /></p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <img width="276" height="110" src="http://us.i1.yimg.com/us.yimg.com/i/ww/beta/y3.gif" /></p>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laboreet dolore magna aliquyam erat. <img width="276" height="110" src="http://www.ctan.org/tex-archive/documentation/visualFAQ/source/lorem-ipsum-logo.png" /></p>
</div>
</div>
</div>
</body>
</html>
Basically what you have there is a main wrapping DIV (div#page) set as relatively positioned, with a DIV inside it (div#branding-main) absolutely positioned near the bottom left of "div#page". It works fine in every browser and (usually) in IE6. The problem is that in 1/30 of page reloads in IE6 the absolutely positioned DIV will be assigned an incorrect value for the BOTTOM property, and will be rendered in the wrong spot on the page. I can't seem to be able to tell what is causing this. It seems like removing one of the DIVs that the content is wrapped in stops it from happening...but I can't say for sure. Also, since this bug is time-dependant, I have added the superflous text and images to give the page a larger profile. The original page I was working on when I discovered this bug is much more graphically rich, and seems to invoke the bug more often than this dumbed down page. I don't think this is directly related to hasLayout, as I am fairly certain I have exhausted that possibility by adding hasLayout to every relevant element. However, giving "div#page" a height larger than the height of the content (ie. an explicit height not dependant on the length of the content) seems to prevent the bug. Giving an explicit width to "div#page" doesn't make a difference. Moving the "div#branding-main" to the bottom of the document seems to prevent the bug as well. However, I'm hoping there is a solution without changing the HTML in such a major way. Please help! link There's something odd going on with the first quote box div and h2 that I can't quite work out, it doesn't appear to happen to subsequent divs (even though they're just copied and pasted...) Any ideas what could be causing that and how to fix it? Thanks --James I have a very curious problem with the formatting of input fields in html forms which has me completely stumped. Basically, input fields are not looking as they should (and in particular, not showing any text typed inside them) in any versions of IE (well, 6, 7 and 8 anyway) - tested on various machines so not a Windows installation issue. Despite my setting a class for them I cannot get them to look like proper inputs, nor can I make the inputted text visible. I can see the cursor for the text when I click inside where the input should be, but it looks far too small- about 4 px as far as I can tell. (???) Interestingly in Firefox the text inputted IS visible, although the border of the inputs doesn't show. I've set a class for input: input {border:1px #000; color:#000;} I also tried setting this explicitly for inside the div holding a form where the input appears: .searchform input {border:1px #000; color:#000;} Neither of which work. Here's one of the forms where I'm trying to include the input (hashes at the moment for links as it's in development): <form action="#" method="POST" name="searchform"> <img src="/images/freecallback.gif" alt="Free Call Back"> <a href="#" title="Member Login"><img src="/images/memberlogin.gif" alt="Member Login"></a> <input type="text" name="searchtext" value="" size="8" /> <input type="image" src="/images/searchbutton.gif" name="searchform" /> </form> And here's another form (same result though interestingly the SELECT appears ok): <form action="#" name="bookahotel" method="post"> <label>Arrival</label> <input name="date" size="6" type="text" /> <p class="text_normalblack">Arriving Today</p> <input name="country" size="6" value="Country" type="text" /> <input name="towncity" size="6" value="Town/City" type="text" /> <select name="_EnquiryType" size="1" class="forminputs" /> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select> <input name="bookahotel_search" size="6" value="" type="image" src="/images/bookahotel_search.gif" /> </form> Any ideas??? Thanks I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this? A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on. image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image. I really appreciate your help. The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that. #nav, #nav ul { padding: 0; margin: 0; list-style: none; float:left; width:89.091em; list-style:none; line-height:1; background:#b6791e; font:11px Verdana, sans-serif; font-weight:bold; padding:0; margin:0 0 .5em 0; } #nav a { display: block; width: 11.1em; w\idth: 10.1em; color: #FFFFFF; text-decoration: none; padding: 0.75em 0.5em; } #nav a.daddy { } #nav li { float: left; padding: 0; width: 11.1em; position:relative; } #nav li ul { position: absolute; left: -999em; height:auto; width: 14.7em; w\idth: 14.5em; font-weight: bold; margin: 0; padding:0; background:#FFFFFF; color:#769841; border: 0.1em solid #769841; } #nav li ul a:hover{ color:#ffff30; background:#769841; } #nav li ul li a{ color:#769841; } #nav li li { padding-right: 1em; width: 14.5em; w\idth:13.5em; } #nav li:hover ul { left: auto; } #nav li a:hover, nav li.sfhover a:hover{ color:#FFFF30; } #nav li ul li a:hover { color:#FFFF30; } #nav li:hover ul, #nav li.sfhover ul { left: auto; clear:both; } #nav li ul ul { margin: -3.3em 0 0 5em; } #nav li:hover, #nav li.sfhover { background: #769841; } #nav li a:hover, #nav li.sfhover a:hover{ color: #ffff30; } #nav li ul a{ color:#769841; padding:.4em; } I'm using external style sheets on a couple of sites, and have the following problem: When I click and drag down over the text, to copy & paste it into an email or whatever, all the text on that page is automatically highlighted .... I can't control the drag / selection, it's all or nothing. When I click and drag upwards, nothing happens at all ... it won't work. Any way to solve this? I don't get this problem with internal style sheets. Andy Please go to this page - http://www.pacunionsonoma.com/real-estate-agent.asp?realtor=51 On the top right click on Active Listings Then watch the top agent image, title, and intro text. It is out of place BUT only until the page finishes loading, then it "jumps" in place... I actually am having two problems, the one I alluded to in the subject and one I posted previously but got no response. This time, I'm including a URL and a CSS link in the hopes that someone might be able to help me out. The problem I posted earlier is regarding my navigation column and footer being omitted about 80% of the time in IE5/Win. Obviously, that's a huge problem. Of the browsers I've tested, it only happens in IE5/Win. The second problem is a bizarre issue regarding list items and the copy of the website. For some reason, in both IE5/Win and IE6/Win, the copy in the main column is slightly indented when there are list items (i.e. my navigation links!). This doesn't happen in any other browser I've tested and let me tell you, it's really cramping my style, because it makes the copy look like crap. Anyway, here's the URL of a test page: I've removed the page link. And here's the CSS link: http://dev.homedecorbuyer.com/stylesheets/default.css * Note: about 8 lines of CSS are on a different stylesheet, but only have to do with color and the header graphic. Please help. Whenever I can lend a helping hand on this forum, I post; it's my way of paying it forward. Any assistance would be greatly appreciated. Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! After hours of pain in my head and probing to get my leftmenu 100% height of my contentbox... I need some help i think... http://www.ipan.be/dev (the bad result with leftmenu not 100%) http://www.ipan.be/dev/styles/ipan.css http://www.ipan.be/dev/styles/ipan_news.css any solution to get the thing that is making me crazy working? I have two pages that are giving me problems, only in IE of course. On the first, http://www.jaypaulstudio.com/galler...ure/summer.html or even http://www.jaypaulstudio.com/galler...eachdancer.html I think the difference in margins causes the problem, but the scroll bar extends outside of the bounds of the page (the blue part). The second, http://www.jaypaulstudio.com/galler...ture/budda.html is different; I cannot make the page contents left align without breaking everything else in the content. My style sheet is he http://www.jaypaulstudio.com/main.css Any solutions or suggestions would be much appreciated. Even a good site on how to hack css for IE... Sarah Hi... I am working on a web site. Every thing is working fine in PC Internet Explorer... but some code effect is not going to display in MAC IE. The Code which is not working is as under... Style Sheet --------------- .L1px { font-size: 1px; line-height: 1px; } --------------- * The Code where the style sheet is called... ------------------------------------------ <tr> <td colspan="2"bgcolor="#B0B0B0" class="L1px"></td> </tr> --------------------------------------- * The above mentioned line is not working in MAC IE. The functionality of this code is to display a horizontal line on left hand side Navigational links on the site. Please find the attatched gif file to know the exact issue. This image is an screen shot for the left navigational menu... The problem as i discussed earlier that the Gray horizontal lines are not going to display in MAC internet explorer, but working very fine in PC internet explorer. Thanks Osman Mumtaz I am currently trying to build a website for a church, and have run into a little css coding problem: It seems as if the browser is not interpreting how I see the CSS code to lay out on the page (common mistake I'm sure). I know a lot of the problems I am having comes from the height of my id's. If you take a look at "sci.tamucc.edu/~ksnapka/Website/Home/index.php" , the blue-bordered box is my "bodyWrap" css id. I am wanting this to expand to 100% of its contents inside the div container. If you look under some of the pages under "Our Faith in Action", I believe these work fine because I am using text inside of the bodyWrap container instead of other div containers nested in bodyWrap. The display on the home page actually looks better on IE, so I'm also not sure why firefox sets the height of that contained to 0 (I assume for some reason it sees that the container is empty since it just has other divs located inside of it?) The CSS code is on "sci.tamucc.edu/~ksnapka/Website/CSS/csTemplates.css" Any help is greatly appreciated Thank you in advance. Hello, I'm new here and to CSS too. I've tried to fix this bug I had for a while, but haven't found any decent answers. My problem resolves around this page : http://www.dessinsdrummond.com/house_plans_collection.html In IE, the page seems to appear correctly, however, in Firefox, the white DIV doesn't follow the content of my page, thus the layout doesn't appear very well... I'm guessing it is because the float property is set... I wonder if there is any ways to fix this problem. Thanks! I am going nuts trying to figure out what's causing my problem... <edit>Links Removed by User</edit> I don't even know how to explain it, other than it works fine in FF. Basically, when the text-area cols are set too large (>40), then the right cells all collapse to the left instead of obeying the specified width of the left cells... It has nothing to do with the colspan, I tried removing it and just having the textarea in the right cell, but it still causes the "squishing" Anyone have an idea? Thanks in advance. Hello there We hire designer who make for us "table unless tabular data design" on our site http://www.netincusa.com/ we test it, it works well in ie (5-6),FF and Opera yesterday one of our customers told, that in IE 7 site have terrible look. unfortunately i haven't IE7 just now, going to install is tomorrow, can u advise how can i correct this error ? is it so hard to do it myself (i have 'html' knowledge) thank you Hi i have built a navigation system with css controled list, with dropdown effects that works well in both IE6 and FF 1.5 but the problem is that in FF the menu bar is not taking all the space that it is given to him (750px) on the right end of the menu navigation bar there is a white space that i can't get ride of. The navigation bar background is orange! In IE there is no problem the entire navigation bar is Orange, but in FF there is 6px white space on the right end! here si the code, i have added background almost everywhere to make taht space the same color as the rest of the menu but it doesn't help! CSS Code:
/* Positionning & Structure of 1st Level Menu */
#navigation {
margin: 0;
padding: 0;
list-style: none;
width: 750px;
display: block;
background-color: #DA5D09;
}
/* Positionning & Structure for Sub-Menus */
#navigation ul{
display:block;
/*margin:0;*/
padding:0;
list-style: none;
margin: 0;
background-color: #DA5D09;
border-style: solid;
border-color: #fff;
border: 1px;
}
#navigation li ul {
position: absolute;
top: 173px;
display: none;
}
/* Structure for 1st level Menu Items */
#navigation li {
list-style: none;
width: 124px;
height: auto;
display: block;
float: left;
margin: 0;
padding: 0;
background-color: #DA5D09;
}
/* Structure for Sub-Menu Items */
#navigation li li {
display: block;
float: none;
margin: 0;
padding: 0;
list-style: none;
width: 124px;
}
/* Styles for 1st level Menu Items */
#navigation li a{
text-align: center;
background: #DA5D09;
border-width: 0 2px 0 0;
border-color: #fff;
border-style: solid;
color: #fff;
font-size: 11px;
font-weight: bold;
display: block;
text-decoration: none;
padding: 10px 0;
margin: 0;
}
/* Styles for Sub-Menu Items */
#navigation li li a{
text-align:left;
background: #DA5D09;
border-width: 1px 0 0 0;
border-color: #fff;
border-style: solid;
font-size: 10px;
display: block;
text-decoration: none;
padding: 5px;
margin: 0px;
}
/* The magic */
#navigation li:hover ul, #navigation li.over ul { display: block; }
The XHTML Code: <ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a>
<ul>
<li><a href="#">Muzik News</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</li>
<li><a href="#">Lifestyle</a>
<ul>
<li><a href="#">Urban reports</a></li>
<li><a href="#">Style & Gear</a></li>
<li><a href="#">Sports Corner</a></li>
</ul>
</li>
<li><a href="#">Community</a>
<ul>
<li><a href="#">Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>
<li><a href="#">Muzik</a>
<ul>
<li><a href="#">Muzik Lounge</a></li>
<li><a href="#">Online Radios</a></li>
</ul>
</li>
<li><a id="lastright" href="#">Muzik Store</a></li>
</ul>
The navigation UL is included in a global div (that contains the entire page) of 750 px as well! I am a real newbie with css based design so you might notice my code is not very logic all the time and has a lot os redundancy but at least i am trying to convert to this new paradigm! Thx in advance for the help! #search { text-align:left; font-weight: bold; background-color: #fff; border: 1px solid #000; margin-bottom: 10px; } #search h2{ padding:0; width:100%; height:20px; background-color: #315A60; color:#fff; text-transform: uppercase; } #search h2 span{ padding-left:5px; border: none; } the above script two box that look like the picture IE.jpg when viewed in IE. But when it is viewed under mozilla the heading is not at the top of the box. Why is this happening? Hi to all Can anyone help me how to identify browser in css and apply css according to the browser for example // if Browser is IE 7 .test { font-size:10px } // if Browser is IE 8 .test { font-size:12px } Is this is possible . i found this code but it does not work for iE 7 or IE 8 <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6hacks.css" /> <![endif]--> thanks |
|||||||