|
CSS - Css From Phpbb Conflict
Can someone look at this and see what my background is not appearing properly in Firefox? It only happens on my forum page that is the same page with the phpbb dropped into the middle. I am sure the css of phpbb is conflicting with my CSS for the web site. You will have to use a CSS browser plug in to view thee is just too much to post.
Link to web site Similar TutorialsMy forum: http://diii(dot)site50(dot)net/forum/viewtopi(dot)php?f=4&t=5 The difference: http://gwshack(dot)us/forums_small/viewtopic(dot)php?t=2092 All I know is the profession icons are on top of each other and shouldn't be and it's adding way too many returns between builds. Example of that: http://diii(dot)site50(dot)net/forum/viewtopic(dot)php?f=30&t=20 Here's what it should look like: http://jen(dot)gwshack(dot)us/viewtopic(dot)php?t=73 And the box code seems messed up. I'm told it's a CSS issue with my forum's theme (I have no clue about all that crap...). Anyways, if you can help out, that'd be great. P.S. I have no clue how this could be understood at all without links... Anyways, replace (dot)'s for .'s. I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up. The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it. I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks! Forums: Click Here Stylesheet: Click Here Pictures of my problems: Text problem- Line Problem - Hey guys, hit a problem with my div formatting in css. usig external style sheet with the two styles "header" and "regular". If i make the div class="regular" and then make the first line class="header" using the <a> tag without defining href (as it is not a link, and dont want it to be a paragraph). Then the content below the 1st line ends up superimposed over the 1st line. You understand what i mean? Hopefully this might be a common bug? Anyone know what is causing this? im using IE6.0 to check it for bugs. It is offline atm, as i am making it. but it can be made available if anyone needs to see it. Code: <div id="content" class="regular" style="top: 280px; background-color: F5DEB3; padding: 10px; padding-bottom: 0px;"> <a class="header">About New Zealand</a> <p>New Zealand is one of the most unique places in the world to dive. Its rich, nutrient-dense waters provide a home to a <a href="constructionpage.html" class="interlink">multitude</a> of exotic and amazing <a href="constructionpage.html" class="intralink">creatures.</a> Whilst many of the tropical wonders are summer visistors to our shores, there is an abundance of life all year round.</p> </div> Monkeewrench p.s sorry the code window is stuffed, first time using it, lol ...And for once firefox is the problem! Well here it is part of the page in internet explorer first And here in firefox Why the overlap in firefox? Heres my css Code: body {
margin: 0px;
padding: 0px;
}
#header {
background-color: #9F0000;
width: 760px;
height: 150px;
margin-right: auto;
margin-left: auto;
z-index: 1;
background-image: url(../Graphics/png/headergradient.png);
background-repeat: repeat-x;
}
#NavDiv ul {
margin-top: 0px;
margin-bottom: 2px;
}
#MainContent table {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
}
#NavDiv li {
list-style-type: none;
display: inline;
margin-right: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
#NavDiv {
width: 760px;
background-color: #999999;
height: 25px;
margin-right: auto;
margin-left: auto;
z-index: 1;
padding-top: 5px;
padding-bottom: 5px;
}
.headertitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000000;
}
#Footer p {
text-align: center;
}
#MainContent {
height: 600px;
width: 760px;
text-align: left;
margin-right: auto;
margin-left: auto;
background-color: #FFE784;
}
#MainContent p {
margin-left: 50px;
margin-right: 50px;
margin-top: -10px;
}
#Footer {
background-color: #9F0000;
height: 116px;
width: 760px;
visibility: visible;
background-image: url(../Graphics/png/headergradient.png);
background-repeat: repeat-x;
margin-right: auto;
margin-left: auto;
bottom: 0px;
position: static;
}
#header li {
color: #FFFFFF;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#Footer p {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
}
#MainContent li {
list-style-image: url(../Graphics/png/glove.png);
margin-top: 1px;
}
And the page in question is http://bif.dmsbdesign.com/WWA.html Also anyone have the name of a good css book I can pick up? Hi Folks, I've created a new css skin for my asp.net storefront. Everything works as I'd like except that my content div keeps getting expanded beyond the barrier of the main wrapper. I think it's because of the tables that the storefront fills into the content div, but i'm not really sure. The problem only exists in IE. looks right in FF. If you look at this page in both IE and FF you can see the difference pinkgolftees.com/default.aspx?skinid=9 the main content area sticks out the right side and my max width of 500px seems to be ignored. Is there a way to control this with my stylesheet so I don't have to change the code for the storefront? is it in fact the tables that are causing my problem, or have I created an error somewhere else? thanks Mark I've got a conflict and would appreciate a review. I'm trying to change to css forms. Looks fine in IE (majority of my site visitors), but Firefox throws the form below. I think it's in my column layouts, but I don't know how to get around it. To view: http://www.mtn.ncahec.org/aboutus/test.asp Base css is To view: http://www.mtn.ncahec.org/aboutus/base.css Think the culprit is: div.row { clear: both; padding-top: 10px; } div.row span.label { float: left; width: 25%; text-align: right; font-weight: bold; } div.row span.formw { float: right; width: 70%; text-align: left; } Thanks for any assistance. Hi, I'm trying to get top both corners of my table header row to have a rounded corner each, but only one is appearing. The HTML is: Code: <tr> <td width="12%" class="tbl-col cnr-tl">Col 1</td> <td width="20%" class="tbl-col">Col 2</td> <td width="20%" class="tbl-col">Col 3</td> <td width="30%" class="tbl-col">Col 4</td> <td width="12%" class="tbl-col cnr-tr">Col 5</td> </tr> and the css is: Code:
.tbl-col {
background-color : #FFDA99;
color : #C00000;
font-size : 15px;
font-style : italic;
font-weight : bold;
height : 25px;
text-align : center;
}
.cnr-tl {
border-top-left-radius : 10px;
-moz-border-radius-topleft : 10px;
-webkit-border-top-left-radius : 10px;
}
.cnr-tr {
border-top-right-radius : 10px;
-moz-border-radius-topright : 10px;
-webkit-border-top-right-radius : 10px;
}
When the styles are in this order, the right hand column has a rounded corner, but if you swap the order of .cnr-tl and .cnr-tr, the left hand column has a rounded corner, but I can't get both end columns to have rounded corners at the same time. Putting both corner styles on one column does work, though, but I'd like to have both end columns to have rounded corners and the middle columns to have straight corners. Does anyone know how to do this? Debbie I have a header where I have two different div's that need to sit opposite each other on the same line (one aligned right and the other left). I used a float since it was the simplest way to get the job done. But in the div floating right I have three hyperlinks that have borders. When I float the div the border on the top and bottom dissappear when I remove the float the border on the top and bototm re-appear. any ideas? Here's the CSS... It's raw as I'm still developing these sections. Code:
#headerRight
{
float: right;
}
#headerLeft
{
float: left;
}
#header a:link
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:active
{
border: #000 solid 1px;
text-decoration: none;
}
#header a:hover
{
border: #000 solid 1px;
text-decoration: none;
background-color: #333;
color: #ffffff;
}
#header a:visited
{
border: #000 solid 1px;
text-decoration: none;
}
Hi, my CMS is bridged with a forum and the body background color from the CMS is overriding the forum css. I have similar issues with the p and td tags and perhaps more small stuff. How can I resolve the conflicts so I can set the forum styles independent of my Mambo template? Here is an example (body color issue) CMS code: Code: body {
margin: 10px 0px 10px 0px;
padding: 0;
font: 101.5%/1.4em "Trebuchet MS", Tahoma, Verdana, Helvetica;
letter-spacing: normal;
background: #232323 url(../images/body_bg.png) repeat-x center top;
color: #999;}
Forum code: Code: body {
font: 90%/85% Verdana, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 12px 0 4px 0;
}
I'm using IE7 (becuase my company demands it) and I have the following code 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <body> <form> <input name='reason' type='text' size='75' value='' style='border:none;'/> </form> </body> </html> and it shows a border in my input even though there's a 'border:none;' but when I remove the Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The border dissapears! Is there a different doctype that I'm supposed to be using here? Am hoping someone knows the deal here... I'm setting up a site where html skins feed into PHP to generate the final pages. It's very simple; just header, footer and main.html's for the index page. The problem: A DIV to the left of the main body holds a no-repeat background [to place an image in that area]. I want a slight overlap with the main body div; alas the second div contains links, and with even the slightest overlap of these 2 divs, the links go funky ~ you can't select them. I tried z-indexing it to no avail Does anyone know if there's a route around this conflict? The page: (URL address blocked: See forum rules) [koff. am just kicking it of layout wise, so do excuse the lack of actual content!] thanks for any help [hopey hopey] Hey All, I am modifying a wordpress template and have increased the size of the right side bar. All seemed fine in firefox but when I hit the site in IE, the column dropped to the bottom of the page. I can't seem to isolate the buggy code. Here's a snippit: Code: body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
}
strong, em, b, i {
font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
.comments input[type=text], .comments textarea, code {
font-family: Monaco, "Courier New", Courier, monospace;
}
/*- Page Structure */
body {
font-size: 62.5%; /* Resets 1em to 10px */
color: #444;
background: #eee;
text-align: center;
}
body.lang-ar,
body.lang-fa,
body.lang-he,
body.lang-hi,
body.lang-km,
body.lang-ko,
body.lang-ja,
body.lang-th,
body.lang-zh {
font-size: 75%; /* Resets 1em to 12px */
}
#page {
background: white;
text-align: left;
margin: 0 auto;
padding-top: 20px;
position: relative;
border: 1px solid #ddd;
border-top: none;
clear: both;
}
.columns-one #page {
width: 560px;
}
.columns-two #page {
width: 900px;
}
.columns-three #page {
width: 950px;
}
#header {
position: relative;
height: 200px;
background: #3371A3;
background-position: top right;
}
.content {
padding: 0 20px 10px;
}
body.columns-two #primary-wrapper {
float: left;
margin-right: 0px;
width: 0%;
}
body.columns-two #primary {
margin-right: 220px;
}
body.columns-two .secondary {
float: right;
}
#primary {
position: relative;
float: left;
width: 500px;
padding: 10px;
}
* html #primary {
display: inline;
}
.columns-one .secondary {
width: 240px;
border-top: 1px solid #eee;
}
.columns-three .secondary {
width: 175px;
}
.secondary {
width: 260px;
float: left;
font-size: 1em;
line-height: 1.5em;
color: #666;
position: relative;
padding: 0 10px;
overflow: hidden;
}
#sidebar-2 {
clear: right;
}
.comments {
text-align: left;
margin: 30px 0 0;
position: relative;
}
/*- Main Menu in Header */
ul.menu {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
left: 20px;
width: 90%;
}
ul.menu li {
display: inline;
margin: 0;
}
ul.menu,
ul.menu li a {
padding: 5px 15px 6px;
}
ul.menu li a {
font-size: 1em;
color: white;
margin: 0;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
}
ul.menu li a:hover {
background: #333;
color: #eee;
text-decoration: none;
}
ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover,
ul.menu li.current_page_ancestor a,
ul.menu li.current_page_ancestor a:hover {
color: #333;
background: white;
text-decoration: none;
}
/*- Sidebar Subpages Menu */
.sb-pagemenu ul {
margin-left: 10px;
}
.sb-pagemenu ul ul {
margin-top: 2px;
}
.sb-pagemenu ul ul .page_item {
margin-left: 10px;
padding: 0;
}
.sb-pagemenu .current_page_item {
}
Is there something obvious here that causes the issue? Many Thanks dale littleredplanet my pages have the following structure, which you can see in action at http://www.auroratheatre.org: Code: <body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="content">
<div id="col"> left nav </div>
<div id="main"> main center column </div>
<div id="photocol"> right column </div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
and the following CSS: Code:
html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 80%;
color:#000;
background-color:#F8ED97;
margin: 0 auto;
}
#wrapper {
padding: 0px;
background-image:url(../images/back.gif);
background-position:center;
background-repeat:repeat-y;
position: absolute;
}
html>body, html>body #wrapper {
height: auto;
}
#header {
text-align: center;
background-color: #000;
height: 90px;
width: 100%;
}
#content {
width: 775px;
margin: 0 auto;
text-align: center;
margin-bottom: 30px;
}
#col {
width: 130px;
background-color: #900;
float: left;
}
#main {
width: 404px;
float: left;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 30px;
text-align: left;
}
#photocol {
width: 220px;
float: left;
}
#footer {
clear: both;
background-color:#000;
text-align: center;
width: 100%;
position: absolute;
bottom: -1px;
}
This works well for compliant browsers, centering the content on the screen and putting the footer at the bottom of the viewport even if the content isn't long. This is what I want. The trouble is, in IE 5.0 it doesn't center the content, just the background, and everything is thrown to hell. A little scratching around revealed that if you want to center a div in IE 5.0, you need to use text-align: center. OK, but if I DO that, and add a text-align: center to the #wrapper div, then everything is OK in IE 5.0 and Mozilla, but NOT IE 6.0 - modern IE browsers do a weird thing of putting the footer to right of all the content, making the page scroll horizontally, which is ugly as hell. If I remove the position: absolute from the #footer div than that problem goes away, but the footer sits at the bottom of the content, not the viewport, and pages with short content look bad. Anyone know of a way to have it all ways? Centered content and absolute footer and happy IE 5.0? Thanks, -D Hello everyone, I'm working on a word press design for my site and I'm having some problems with absolute positioning. The positioning is fine in and of itself but I've found that if the absolute positioned element is underneath a link, it voids out the link. The text for the link is there, just no link. I've tested this by removing the absolute positioned element and the links work fine after I do that. Any idea what's going on with this? This occurs in both Firefox and IE. I've validated the CSS as CSS 2.1. You can see what I'm talking about at my site randomdamage dot org (the forum wouldn't let me post the link) If you scroll to the bottom of the page you can see two links which are being affected, the comments link for the last post and the next page link. The absolute element is the red splatter graphic. Here's the relevant css: /*footer styles*/ #footer blockquote { background-image: url(images/splash.png); width: 850px; height: 100px; position: absolute; left: 5px; background-repeat: no-repeat; bottom: 63px; text-indent: -9999px; z-index:9;} #footer { clear:both; font-family: Georgia, "Times New Roman", Times, serif; padding-right: 20px; padding-left: 20px; padding-top: 20px; } #footer p { text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding-top: 10px; padding-bottom: 40px; } Any help would be greatly appreciated. Hi im trying to detect ie or mozilla but i cant get it to work.. could somebody please tell me what is wrong with my code.. thanx in advance !!! Code: Code:
<head> <script language="javascript">
<!-- Begin
browser_version = parseInt(Navigator.appVersion);
browser_type = navigator.appName;
if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4)) {
document.write("<link REL='stylesheet' HREF="style.css" TYPE='text/css'>") ;
}
else if (browser_type == "Netscape" && (browser_verson >= 4)) {
document.write("<link REL='stylesheet' HREF="stylemozilla.css" Type='text/css'>") ;
}
// --></script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>---</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
<!--
.Style9 {
font-size: 26px;
color: #85AC1E;
}
.Style13 {color: #85AC1E}
.Style15 {font-size: 19px}
.Style16 {font-size: 22px}
-->
</style>
</head>
It seem that everytime I added the image tag, the div'x area get bigger in IE but not in Mozilla/Firefox browser. So, I thought by added the "margin-bottom:-360px;" to the div would fix it but it had an opposite effect. Meaning it worked in IE but Mozilla show a vertical scrollbar. So, does anyone know how can I make the <img> overlap one another without being stacked on one after another in height for IE if I take out the "margin-bottom: -360px;"? Thanks... Code:
div.divBox1
{
width: 286px;
height: 359px;
float: left;
}
div.divClearFloat
{
clear: both;
height: 0px; /* For IE Stupidity (it added some spaces after clearing the float) */
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
div.divDottedLineAdvertisementSeperator1
{
width: 575px;
height: 3px;
background-color: #ff0000;
font-size: 1pt; /* For IE Stupidity (minimum height only work with current font-size somewhere) */
}
Code: <div class="divBox1"> <div style="margin-bottom:-360px;"> <img src="images/doctor.jpg" style="position:relative;top:0px;left:0px;z-index:2;"> <img src="images/we_help.jpg" style="position:relative;top:-360px;left:0px;z-index:1;"> </div> </div> <div class="divClearFloat"></div> <div class="divDottedLineAdvertisementSeperator1"></div> Hey there, I'm having a bit of a problem and I was wondering if any of the wizards here can help me. I'm trying to use TinySlideshow (leigeber.com/2008/12/javascript-slideshow/) I've downloaded TinySlideshow and I've done a little bit of editing to spacing/colouring, and swapped in my own images. I had this as a basic working "demo" page on my own pc, and it worked completely fine in all the popular browsers. The problem is that I've built the frontpage of my new website, and I want to have a slideshow running to display a preview of the newest articles on my website; paulietheboss.com (Please note, none of the links etc work, this is just a dummy page for the time being) If you view that in Firefox or Chrome you'll see that the Slideshow works just perfectly. There is an issue with Opera but I'll get to that at the end. However, in Internet Explorer the large images just don't display at all. I've had a couple of coder friends try and troubleshoot it by introducing javascript alerts in order to check variables are being populated properly etc, but they can't find the problem. It doesn't make sense anyway since it works in other browsers. Thing is, when I have the slideshow on a page by itself it works just fine, even in IE, but when I put it anywhere on this page (even outside of the main page content) it does not display the large image in Internet Explorer. This leads me to believe that my css is possibly causing a conflict somewhere.. I can't think of anything else it can be. Has anyone got any ideas I can try to get this working properly in IE? We must have been trying different things for 8-10 hours now and it's driving me insane, especially since it looks just perfect in Firefox! Sidenote: in Opera on loading, only the first two thumbnails appear, but if you refresh the page it's all fine, any ideas on this one? Not as important, but still... |
|||||||