Jump to content

Explorer Bug(Really Need Help)

JA

By JA
in CSS Help

 Share

Recommended Posts

JA Newbie

JA

Posted
Posted
Hi there, got a problem with a forum we've recently had coded, our page output looks absolutely fine in Mozilla FireFox, yet in Internet Explorer the page looks entirely different. If anyone would be so kind as to view http://www.rdkleague.com/noise/122/view (In the 2 Browsers) and attempt to point me in the right direction I'd sincerely appreciate it.

Cheers.
Link to comment
Share on other sites
Chips Member

Chips

Posted
Posted
Is it something to do with padding and spacing/margins? In one browser padding or spacing is included in the overall width (ie, you say padding=20 and width=800, then your width = 800 with 20 padding inside of it. In the other browser, you say padding=20 and width=800, then you actually have 820 - 20 padding on the outside).

Not sure which is what, but essentially i'd say one of your divs is too wide for the overall width. It has also happened to me when two divs add up to their containing divs width too..
ie if a pair of divs are (for arguements sake) width 120 and width 380 - and your overall width is 500 with those two divs nested inside, then you may see one [i]above[/i] the other instead of floating side by side.

narrow down a few divs or so, and see if it fixes itself (or similiar).
I am pretty sure that's your problem, I'm just bad at explaining things, and haven't got time to trawl through it carefully enough to try and spot it :D
Link to comment
Share on other sites
Caesar Newbie

Caesar

Posted
Posted
Unless you use CSS hacks to get around it, you'll have better luck using HTML tables....rather than divs/CSS. And even using the hacks (And you will have to use quite a variety of them if you want it to display properly on most of the popular browsers Eg: IE, Firefox, Opera, Safari, Netscape, AOL...etc) it will never be 100%.

You are not cross-browser compatible!! :-P
Link to comment
Share on other sites
JA Newbie

JA

Posted
  • Author
Posted
[quote author=Caesar link=topic=101741.msg402903#msg402903 date=1153780782]
Unless you use CSS hacks to get around it, you'll have better luck using HTML tables....rather than divs/CSS. And even using the hacks (And you will have to use quite a variety of them if you want it to display properly on most of the popular browsers Eg: IE, Firefox, Opera, Safari, Netscape, AOL...etc) it will never be 100%.

You are not cross-browser compatible!! :-P
[/quote]
I'm not particularly bothered if it's not 100%, but look at that compared to what it shold be (and is in Firefox).
Link to comment
Share on other sites
mainewoods Newbie

mainewoods

Posted
Posted
Ceasars right, not enough browsers are fully CSS2 capable right now so that you can go ahead and use only divs - no tables.  ie is about 85% of the web right now so unless your site is not made for the open web , you will have to redo the program with tables.
Link to comment
Share on other sites
ppgpilot Member

ppgpilot

Posted
Posted
show your CSS code and we can help.

I had problems with the browser bugs (IE) for a long time and now pretty good with the work arounds. It only takes a minute.

Keep with the CSS - much better than tables...

I like your graphics!!

you can also send to david&mypilot&org&&
Link to comment
Share on other sites
JA Newbie

JA

Posted
  • Author
Posted
[quote author=ppgpilot link=topic=101741.msg402999#msg402999 date=1153798125]
show your CSS code and we can help.

I had problems with the browser bugs (IE) for a long time and now pretty good with the work arounds. It only takes a minute.

Keep with the CSS - much better than tables...

I like your graphics!!

you can also send to david&mypilot&org&&
[/quote]
ok, here goes, the entire css

[code]/* Forms */

/* Forms - Post */

form.post div {
    clear: both;
    margin: 10px 10px 10px 100px;
    padding: 5px;
}

form.post div ol {
    margin-left: -40px;
}

form.post div span {
/*    float: left;
    width: 100px;
    text-align: right;*/
    display: block;
    line-height: 10px;
    padding: 10px;
    font-weight: normal;
    margin-left: -60px;
}

form.post div input {
    width: 300px;
    font-size: 20px;
    height: 30px;
}

form.post div textarea {
    width: 297px;
    height: 200px;
    font-size: 12px;
}

form.post div select {
    height: 20px;
    font-size: 14px;
    margin: 5px 0px;
}

/* Forms - Delete */

form.delete div a {
    clear: both;
    margin: 0;
    padding: 40px;
    display: block;
    font-size: 20px;
    text-decoration: none;
}

form.delete div a span {
    padding: 10px;
    color: black;
}

form.delete div a:hover {
    background-color: #eee;
}

form.delete div {
    border: 1px solid #ddd;
    margin: 20px;
    background-color: white;
}

form.delete div:hover {
    border: 1px solid #aaa;
}

form.delete div.hidden {
    display: none;
    margin: 0;
    border: 0;
    padding: 25px;
    border-top: 1px dashed #ddd;
    background-color: white;
}

form.delete div.hidden p {
    font-size: 14px;
}

form.delete div.hidden div {
    border: 0;
    margin: 0;
    padding: 0;
}

form.delete div a input {
    padding: 10px;
    margin: 0 20px 0 0;
}

form.delete select.siblings {
    width: 100%;
    height: 200px;
    font-size: 13px;
}

form.delete select.siblings option {
    padding: 5px;
    font-size: 13px;
}

form.delete select.children {
    width: 220px;
    height: 200px;
    font-size: 13px;
    float: left;
}

form.delete select.children option {
    padding: 5px;
    font-size: 13px;
}

form.delete input.next {
    font-size: 20px;
    height: 30px;
    width: 100%;
    margin: 10px 0;
}

form.delete div#transitional {
    display: none;
    position: relative;
}

form.delete div#destinationContainers {
    float: left;
    height: 200px;
    width: 200px;
    margin-left: 15px;
    border-top: 1px dashed #ddd;
}

form.delete div#destinationContainers div.destChild {
    padding: 5px;
    border-bottom: 1px dashed #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

form.delete div#destinationContainers div.destChild div {
    font-size: 14px;
}

form.delete div#destinationContainers div.destChild span {
    font-size: 10px;
    color: #888;
}

form.delete div#destinationContainers a.control {
    display: inline;
    padding: 0;
    margin: 0;
    font-size: 10px;
    background-color: white;
}

form.delete div#destinationContainers a.control:hover {
    background-color: white;
}

/* Category */

div.category {
    padding: 12px;
    border-top: 1px solid #b0b081;
    border-left: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
    border-bottom: 1px dotted #b0b081;
    background-color: #cdcd97;
    background-image: none !important;
}

div.category span.name {
    font-size: 19px;
    color: black;
    display: block;
}

div.category span.description {
    font-size: 10px;
    color: #555;
    display: block;
}

div.category span.extra {
    float: right;
    font-size: 10px;
    display: block;
}

div.categoryForums {
    padding: 10px;
    background-color: white;
    border-bottom: 1px solid #b0b081;
    border-left: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
}

/* Category - Forum Row */

div.forumRow {
}

div.forumRow a span.name {
    font-size: 12px;
    color: #333;
    display: block;
}

div.forumRow a span.description {
    font-size: 9px;
    color: #888;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

div.forumRow a {
    display: block;
    text-decoration: none;
    padding: 10px;
    border: 1px solid white;
}

div.forumRow a:hover {
    background-color: #cdcd97;
    border-top: 1px solid #e3e3a7;
    border-left: 1px solid #e3e3a7;
    border-bottom: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
}

div.forumRow a span.extra {
    float: right;
    font-size: 10px;
    color: #888;
    display: block;
}

div.forumRow a:hover div {
    color: black;
}

/* Forum */

div.forum {
    padding: 12px;
    border-top: 1px solid #b0b081;
    border-left: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
    background-color: #cdcd97;
    background-image: none;
}

div.forum span.name {
    font-size: 19px;
    color: black;
    display: block;
}

div.forum span.description {
    font-size: 10px;
    color: #555;
    display: block;
}

div.forum span.extra {
    float: right;
    font-size: 10px;
    display: block;
}

div.forumTopics {
    padding: 10px;
    background-color: white;
    border-bottom: 1px solid #b0b081;
    border-left: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
    border-top: 1px dotted #b0b081;
}

/* Forum - Topic Row */

div.topicRow {
}

div.topicRow a span.name {
    font-size: 12px;
    color: #333;
    display: block;
}

div.topicRow a span.description {
    font-size: 9px;
    color: #888;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

div.topicRow a {
    display: block;
    text-decoration: none;
    padding: 10px;
    border: 1px solid white;
    background-repeat: no-repeat;
    background-position: bottom -1px;
}

div.topicRow a:hover {
    background-color: #cdcd97;
    background-position: bottom 515px;
    border-top: 1px solid #e3e3a7;
    border-left: 1px solid #e3e3a7;
    border-bottom: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
}

div.topicRow a span.extra {
    float: right;
    font-size: 10px;
    color: #888;
    display: block;
}

div.topicRow a:hover div {
    color: black;
}

div.topicRow span.boring {
    font-size: 10px;
    padding: 2px;
    display: block;
}

/* Topic */

div.topic {
    padding: 12px;
    border-top: 1px solid #b0b081;
    border-left: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
    background-color: #cdcd97;
    background-image: none;
}

div.topicCont {
    min-height: 102px;
    margin-left: 110px;
}

div.topic div.subject {
    font-size: 19px;
    color: black;
}

div.topic div.message {
    font-size: 11px;
    color: #555;
    padding: 10px;
}

div.topic span.extra {
    font-size: 10px;
    text-align: right;
    display: block;
}

div.topicPosts {
    background-color: white;
    border-bottom: 1px solid #b0b081;
    border-left: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
}

/* Topic - Post Row */

div.postCont span.username {
    float: left;
    font-size: 10px;
    color: #666;
    width: 150px;
    vertical-align: middle;
    line-height: 20px;
    display: block;
}

div.postCont span.reply {
    float: left;
    font-size: 10px;
    line-height: 10px;
    color: #777;
    display: block;
}

div.postCont span.reply span {
    color: #999;
    font-size: 9px;
    display: block;
}

div.postCont a.postShrunk {
    clear: both;
    height: 20px;
    text-decoration: none;
    display: block;
    margin: -12px;
    padding: 12px;
}

div.postCont {
    border-top: 1px dotted #b0b081;
    padding: 12px;
}

div.postRow {
    margin-left: 110px;
    min-height: 102px;
}

div.postRow div.subject {
    font-size: 19px;
    color: #333;
}

div.postRow div.message {
    font-size: 11px;
    color: #888;
    margin: 0;
    padding: 10px;
    border: 0;
}

div.postRow a.link {
    display: block;
    text-decoration: none;
    padding: 10px;
    border: 1px solid white;
}

div.postRow a.link:hover {
    background-color: #cdcd97;
    border-top: 1px solid #e3e3a7;
    border-left: 1px solid #e3e3a7;
    border-bottom: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
}

div.postRow span.extra {
    font-size: 10px;
    text-align: right;
    color: #888;
    display: block;
}

div.postRow a:hover div {
    color: black;
}

div.postCont span.extra span.boring, div.topic span.extra span.boring {
    color: #555;
    text-align: left;
    float: left;
    display: block;
}

div.postCont span.extra, div.topic span.extra {
    color: #555;
    font-size: 10px;
    text-align: right;
    height: 25px;
    border-top: 1px dotted #b0b081;
    padding: 10px 10px 0px 10px;
    margin: 10px -12px 0px -12px;
    display: block;
}

/* Forum Nav */

div.forumNav, div.miniBox div.forumNav {
    font-size: 10px;
    color: #888;
    margin: -12px -12px 10px -12px;
    padding: 10px;
    border-bottom: 1px dotted #b0b081;
    background-color: #cdcd97;
}

/* Post Avatars */

div.avatar {
    width: 100px;
    height: 100px;
    float: left;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid #b0b081;
}

div.avatar img {
    border: 0;
    margin: auto auto;
}

/* Empty Slug */

div.empty {
    text-align: center;
    font-size: 14px;
}

/* Fast Post */

div.topicPosts div.controls div.hidden {
    display: none;
}

div.topicPosts div.controls {
    border-top: 1px solid #b0b081;
    padding: 10px;
}

/* Post etc */

blockquote {
    padding: 10px;
    margin: 5px;
    font-size: 9px;
}

div.pages {
    padding: 10px;
    border-top: 1px dotted #b0b081;
    border-left: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
    background: white;
}

/* Private Messages */

div.message {
    padding: 12px;
    border: 1px solid #b0b081;
    background-color: white;
}

div.messageWrapper {
    border: 1px solid #b0b081;
    background-color: white;
}

div.pmNav {
    font-size: 10px;
    color: #888;
    margin: -10px -12px 10px -12px;
    padding: 10px;
    border-bottom: 1px dotted #b0b081;
    background-color: #cdcd97;
}

div.messages {
    border: 1px solid #b0b081;
}

div.messages a {
    display: block;
    text-decoration: none;
    font-size: 10px;
}

div.messages a:hover div.messageRow {
    background-color: #aaa;
}

div.hiddenThread {
    display: none;
}

div.hiddenThread div.messageRow {
    padding-left: 40px;
}

div.messageRow {
    clear: both;
    height: 10px;
    padding: 5px;
    padding-left: 20px;
}

div.messageRow div.tree {
    float: left;
    height: 20px;
    width: 20px;
    background: transparent url(/noise/images/triangle.png) top center no-repeat;
    margin: -5px 0 0 -20px;
}

div.messageRow div.treeChild {
    float: left;
    height: 20px;
    width: 20px;
    background: transparent url(/noise/images/line.png) top center no-repeat;
    margin: -5px 0 0 -30px;
}

div.messageRow div.messageSeg {
    float: left;
    width: 33%;
    background-color: transparent;
    height: 10px;
    line-height: 10px;
    text-align: center;
}

div.latest div.subject {
    font-size: 19px;
    color: #333;
}

div.latest div.message {
    font-size: 11px;
    color: #888;
    margin: 0;
    padding: 10px;
    border: 0;
}

div.messagesCont, div.messagesContb {
    padding: 12px;
}

div.messagesContb {
    border-top: 1px dotted #b0b081;
}

div.latest {
    margin-left: 110px;
    min-height: 102px;
}

div.messageDetails {
    font-size: 10px;
    color: #bbb;
    margin-bottom: 5px;
}

a.messageShort {
    margin: -6px;
    font-size: 10px;
    color: #aaa;
    padding: 0;
    display: block;
    text-decoration: none;
}

/* Polls */

div.poll {
    margin: 5px;
    padding: 10px;
    border: 1px solid #b0b081;
}

div.poll div.question {
    margin: -10px -10px 10px -10px;
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid #b0b081;
    background-color: #cdcd97;
    background-image: none !important;
}

div.barCont {
    clear: both;
    height: 20px;
   
}

div.barCont div.bar {
    height: 18px;
    border: 1px solid #ccc;
    background-color: #eee;
}

div.barCont div.label {
    float: left;
    font-size: 10px;
    line-height: 10px;
    margin-top: -15px;
    margin-left: 10px;
}

/* ETC */

div.controlBar {
    background: #cdcd97 url("/noise/images/bkg.rep.png") center left repeat-x;
    height: 32px !important;
    padding: 0 !important;
    line-height: 0;
    font-size: 0;
    border-bottom: 1px solid #cdcd97;
    width: 297px;
    margin: 0 0 0 0 !important;
}

div.controlBar a.button {
    height: 32px;
    width: 32px;
    float: left;
    border-right: 1px solid #cdcd97;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    text-decoration: none;
    display: block;
    margin: 0;
    padding: 0;
}

div.controlBar a.button:hover {
    background-position: 0 -30px;
}

div.smiles a {
    text-decoration: none;
    display: block;
    float: left;
    background-position: center center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

div.smiles {
    height: 40px;
    padding: 0 !important;
    margin:  5px 0 !important;
    width: 300px;
}

div.forumFooter {
    border-left: 1px solid #b0b081;
    border-right: 1px solid #b0b081;
    border-bottom: 1px solid #b0b081;
    background-color: #cdcd97;
    padding: 10px;
    font-size: 10px;
    color: #555;
}

div.miniBox a {
    text-decoration: none;
}

div.miniBox div, div#mainContent div.miniBox div {
    background-image: none !important;
}[/code]
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.