|
CSS - Blog Formatting Explorer Problem
Hi,
I have modified a form for a web blog for a friend, and got extra fields included for them. But we have an issue on the pc with internet explorer and the position of the elements in css. On safari and opera and firefox, all the labels for the form tags line up correctly, but on internet explorer they do not, the message label is lined up with the address, how can we fix this. If you look at this page: http://website-traffic.inpress.co.uk/contact-us/ You can see what we mean with the form. How can I fix this problem with the css to get them all correctly lined up. Many thanks Barry Similar TutorialsFirst I am a copy/paste kinda chick w/ not a lot of experience but I do know enough to know that if you want something to look a certain way or act a certain way, there is someone out there saavy enough to get it right :-) On my LiveJournal blog, my style that I am using has the individual userpics/icons by default aligned to the left w/ text right up next to it and wrapping around it. I would like it to by default w/ hopefully some css code, to automatically be beneath the icons. Currently I'm simply inserting br tags (hitting the enter key) when I post a new entry to force my text beneath the icon but I know there must be a way to force it to do what I want it to. The folks at LJ are NOT very helpful and they have this funky layers thing going on as opposed to simply wysiwyg or blank html/css coding pages. You have to learn their system before you do any altering but they do have a place for just adding simple css code changes. First, is this possible and second can someone pleaasseee help? Thanks so much in advance!!! Oh the url is: http://nitamcgrew.livejournal.com/ I'm relatively ignorant about css and html, but I've faked my way along so far. But I've encountered a problem. I designed a style for a blog on LiveJournal, and it looks OK there. (http://www.livejournal.com/users/javajed/). I've also put a small bit of JavaScript in my website to embed my blog there. (http://www.jaredvoss.com/). On my website, the embedded blog is all screwy. All three DIVs should be contained within the scrolling layer, but only two of them are. Originally the sidebar DIV was even hidden behind the layer it's embedded in (I brought it forward using a z-index code). It seems like the sidebar DIV is taking it's position cues from the main body of my site, while the other DIVs are taking their position cues from the layer they're embedded in. I want all three DIVs to be aligned as they are on LiveJournal, and contained within the scrolling layer on my website. Any ideas? I've tried using wrapper divs and container divs (maybe not correctly) without success. Thanks for any help! I've run up against a css problem with the homepage on this site under development. In IE8 the right column in the main content area contains an image swapper and the column pushes out beyond the page content area. It displays properly in FF3. I've tried a variety of margin, padding and width changes without success. How do I correct this for all IE and FF browsers? To avoid bloat I have not included the stylesheet here, but it can be viewed in FF. I'm working on a project for school, I'm nearly done, but for some reason, in Firefox the first link in my navigation menu doesn't fit the formatting of the rest. The link is 'About Us'. Please see he http://lovemeforme.org/testing/ any ideas? I'm stumped! So I seem to have a problem with IE5.x and IE 7. The white bar in #top-bar that is supposed to run along the bottom of my blue banner on my page, works fine in IE6. But it either of the other two browsers it just hugs the top of the page. It doesn't seem to want to obey the padding-top css directive. I'm not really sure why though. Can someone have a look at it for me ? Thanks in advance ... :-) http://www.EnglishTeachingKorea.com I am trying to see what is the problem at my css with internet explorer 6.0, all text is put at the bottom of the page, however in firefox, safari or opera it works fine. Please check it he ucables.com/search/iphone css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance I am trying to see what is the problem at my css with internet explorer , banner is appearing over the text however in firefox, safari or opera it works fine. Please check it he ucables.com css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance Hello, I have tried to do a div next to another div. This worked fine. However then in one div I placed thre other div's, and made them stay next to each other. Naturally one of them did not stay in the same line and wraped under neat the others. The problem is that the right div is now displaying well on FireFox, but incorect on Internet Explorer. (Altough when I set the borders I noticed that the border for the right div was wrong Here is my html code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html {
min-width: 750px;
}
body {
margin: 0;
padding: 10px 0px;
background: #ff0000;
}
div#wrap {
width: 750px;
margin: 0 auto 10px auto;
padding: 0;
text-align: left;
background: #ffffff;
border: 1px solid #d1c7ac;
}
div#innerwrap {
width: 720px;
margin: 0 15px;
padding: 8px 0;
border: 1px sold #ff0000;
}
#body {
padding-top: 10px;
}
#left {
display: inline;
width:510px;
height:510px;
}
#box {
border: 1px solid #d1c7ac;
float: left;
color: #000000;
font-size: 8pt;
overflow: hidden;
width:250px;
height:220px;
}
#right {
height:510px;
text-align: center;
border: 1px solid #d1c7ac;
}
</style>
</head>
<body>
<div id="wrap">
<div id="innerwrap">
<div id="body">
<div id="left">
<div id="box" class="top-left">
Box 1.
</div>
<div id="box" class="top-right">
Box 2
</div>
<div id="box" class="middle-left">
Box 3
</div>
<div id="box" class="middle-left">
Box 4
</div>
</div>
<div id="right">
This is the right text
</div>
<br>
last line
</div>
</div>
</div>
</body>
</html>
Is there maybe a hack I can do to internet explorer so that this element will be solved? or my css is completly wrong, and I need to change it? Just a small explanation on the css; I have a div that contains boxes (left) and another div that just contains text (right). This should be placed next to each other since I did the display: inline; in the left div css. thanks for any sugestions, regards, sim085 Hi... I have a slightly confusing problem. I have an external sheet which all works fine except the colour of links before they are visited, active, etc. (It worked fine but one day stopped without any intervention on my part that I know about!) The active link, visited link and hover link colours work as required and as specified in the external sheet, but it is the original link that does not, defaulting to the, erm, default colour. My external sheet is as follows: body {background-image: url("images/logo.jpg")} type="text/css"; a:link {color: #c0c0c0;} a:visited {color: #FF80FF;} a:hover {color: #FF00FF;} a:active {color: #FF80C0;} h1.c1 { text-align: center; font-size: 46pt; color: #bb8ec8 } h1.c2 { margin-left:130px; font-size: 26pt; color: #bb8ec8 } h4 { text-align: center; color: #b15fb8 } Any idea why is isn't working? Cheers I'm completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency. This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can't find a workaround that works for it. Can anyone else? I really appreciate the help! The complete html is: <head> <title>Example</title> <style type="text/css"> body { margin:0px 0px 0px 0px; background-color:white; } .wrapper { height:425px; width:520px; background-color:cyan; margin-left:auto; margin-right:auto; top:0px; } .midbox { height:280px; width:520px; } .shaded { position:relative; z-index:0; height:95px; width:520px; background-color:yellow; filter:alpha(opacity=50); /* for IE */ -moz-opacity:0.5; /* for older browsers */ -khtml-opacity:0.5; /* for older browsers */ opacity:0.5; } .unshaded { float:left; position:relative; z-index:1; filter:alpha(opacity=100); /* for IE */ -moz-opacity:1.0; /* for older browsers */ -khtml-opacity:1.0; /* for older browsers */ opacity:1.0; height:95px; width:520px; } .bigName { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:50px; width:250px; height:55px; } .bigUsername { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:15px; width:250px; } </style> </head> <body> <form id="form1"> <div class="wrapper" > <div id="divTop" class="unshaded"> <table width="320px"><tr><td align="center"> <input type="text" name="theirName" value="Foo" size="15" class="bigName" readonly="readonly" /> <br /> <input type="text" name="theirUsername" value="bar" size="15" class="bigUsername" readonly="readonly" /> </td></tr></table> </div> <div id="divTopS" class="shaded"></div> <div id="divMid" class="midbox"> <!--some stuff here--> </div> <div id="divBot"class="unshaded"> <input type="submit" value="a button" /> </div> <div id="divBotS" class="shaded"> </div> </div> </form> </body> </html> Hi. I have a table cell <td width="100%"> then a div <div style="width: 100%; height: 400px; overflow-x: scroll; overflow-y:scroll;"> then a table that are wider than td above. I firefox the div is not wider than the td above. In IE7 (not tested in IE6), the DIV does force the td above to be wider than it should. is there a way to make this work in IE7 as it should. Is it a bug in IE7? Any workarounds/ solutions for this?. If not possible to do with CSS then I would appreciate a workaround suggestion. Could I put an image or other element within the TD and set that width to 100% to make it as wide as the TD, and then user javascript to find actual pixelwidth of image or other element, and then use javascript to reset the width of the DIV..... Anybody??? Need it to work in IE6, IE7 and Firefox. Hey, I use floats in my page to position some div's. The page validates for both css and html-strict. When i run the code below in firefox, everything works fine. When i run it in Internet explorer, it does not. It looks messed up then. PHP Code: echo '<form name="contact_action" id="contact_action" method="post" action="process/contact_action.php?act=del">'; while($contact = mysql_fetch_array($query_result,MYSQL_ASSOC)){ echo '<div style="float: left; width: 25%; margin: 0%; padding: 0%;">'; echo '<input type="checkbox" name="selected_contacts[]" value="'.$contact['contact_id'].'"> '; echo $contact['first_name'] . ' ' . $contact['last_name']; echo '</div>'; echo '<div style="float: left; width: 75%; margin: 0%; padding: 0%;">'; echo '<a href="contact_info.php?contact_id='.$contact["contact_id"].'&act=edi">view</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=edi">edit</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=del">delete</a>'; echo '</div>'; } echo '<div style="float: left; width: 100%; margin: 0%; padding: 0%;">'; echo '<br>'; echo '<input type="submit" name="delete_selected" id="delete_selected" value="Delete Selected">'; echo '<br><br>'; echo 'Total '.$nr_of_rows.' Contacts'; echo '</div>'; echo '</form>'; hope you can help me. thanks in advance Hi guys and gals. I am having issue with setting opacity in Internet Explorer so all browsers that understand opacity get - PHP Code: background-color:blue;opacity:0.1.... and Internet Explorer gets - PHP Code: [....continued....]filter: alpha(opacity=50);width:100%;height:100% The height is set via JavaScript but it wasn't working so I set it as a constant and yeah it still isn't working. The width and height are both set so to trigger the filter. However it doesn't appear to be working and in Internet Explorer 7 the whole div is still a dark blue. However in both FireFox3 and Safari it is see through, so can anyone spot my issue? All contributions are welcome and thank you in advance. Jaz Hi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much hi there! i got some trouble in using div for my blog... i think my problem is somewhere here...but i still can't figure out! Code:
<!-- Content Box -->
<div id="content" style="width: 366; height: 393; font-family: tahoma; font-size: 8pt; color: #FFFFFF; font-weight: normal; z-index: 3; line-height: 14px; overflow: auto; position: absolute; left: 519; top: 117; background-color: transparent; border: 0px solid #000000 padding: 13px">
</div>
<!-- End -->
<!-- Menu -->
<div id="menu" style="width: 100px; height: 80px;
border: 0px solid #000000;
font-family: tahoma; font-size: 8pt; color: #ffffff;
font-weight: normal; z-index: 3; line-height: 14px;
text-align: justify; overflow: hidden; padding: 13px;
position: absolute; left: 350px; top: 135px; background-color: transparent;">
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74px; length: 87px; background-color: "transparent"
onClick="document.getElementById('content').innerHTML=document.getElementById('rant').innerHTML" transparent">
<p align="center"><font color="#CC0099">:</font><font color="#FFCC99">: bLog :</font><font color="#CC0099">:</font
</div>
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74; height: 12"
onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font><font color="#FFCC99">: profiLe :</font><font color="#CC0099">:</font>
</div>
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 80; height: 14"
onClick="document.getElementById('content').innerHTML=document.getElementById('shout').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font><font color="#FFCC99">: sHout oUt :</font><font color="#CC0099">:</font>
</div>
<div style="cursor: move; font-family: tahoma; font-size: 8pt; font-weight: normal; color: #ffffff; width: 74; height: 13"
onClick="document.getElementById('content').innerHTML=document.getElementById('blogsters').innerHTML"
<p align="center" transparent"><font color="#CC0099">:</font></font><font color="#FFCC99">: bLogsters :</font><font color="#CC0099">:</font>
</div>
<div style="cursor: move;
font-family: tahoma;
font-size: 8pt;
font-weight: normal;
color: #ffffff;
background-color: "transparent"
onClick="document.getElementById('content').innerHTML=document.getElementById('info').innerHTML"
<p align="center"><font color="#CC0099">:</font><font color="#FFCC99">: bLog info :</font><font color="#CC0099">:</div>
<!-- End -->
<!--Content Proper -->
<DIV id=rant div class="blog" style="display:none;" >
<p align="left">
<Blog>
<DateHeader>
[date]
<p align="left"><br>
</DateHeader>
<b>[blog title]</b><br><br>
[body]
<DIV CLASS="exte">[extended entry]</DIV>
<DIV CLASS="extk">[extended keywords]</DIV>
</p>
<p align="left">
<em><br>
</em>
[author] grooved at
<em> [time]</em><br>[comments] [permalink] <br>
__________________________________________<br>
<p align="left">
<br><br><br>
[comment data]</Blog>
<table width="98%" align="center">
<tr>
<td width="33%">[previous page]</td>
<td width="33%" align=center>[bloghome]</td>
<td width="33%" align=right>[next page]</td>
</tr>
</table>
</div>
you can check the rest of the code at my test page: URL thanks in advance!!! I have a b2 evolution blog that I'd like to alter a bit. I'd like to be able to widen the area where the content is displayed so there isn't so much wasted space on each side. How would I go about doing this? If you need to see the site: http://www.foreverpurple.com/blog/crab_blog.php Hello, I used to run a blog at vritti.net which I took down completely and am nearing the final steps in finishing off the new product. A peek can be had at what is coming at http://www.vritti.net/mt/main I want to make 2 aesthetic changes to the main text area ? 1. Give the text some space to breathe in and 2. Encase the text rectangle in a rounded rectangle so that it gives something solid for the racquet (and other randomly generated images) to lean on. I request you for this help. Thank you. ciao, abhi C |
|||||||