Problem with CSS in Safari, Firefox, Chrome etc [modified] - Web Development Discussion Boards

Keep in mind this is only partly true. Currently browsers are supporting more then 2 parallel connections, see table below.

Firefox 2: 2
Firefox 3: 6
Opera 9.26: 4
Opera 9.5 beta: 4
Safari 3.0.4 Mac/Windows: 4
IE 7: 2
IE 8: 6

Yes, they keep updating. How many does IE 9 support?

I know the language. I've read a book. - _Madmatt

I have no idea why your message was 1-voted. I compensated.

".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997

Thanks

John Simmons / outlaw programmer wrote:
I have no idea why your message was 1-voted

Typical CP pettiness of course.

No comment

You may be able to use image preloading to an array...google it and try.

Chris J
www.redash.org

I have a simple aspx page with 2 inputs(a button and a text box), when I hit the button I send the text box' value via ajax to a server method. When I use chrome/firefox it goes well, but when I send non-eng chars in explorer(versions: 7,8,9) I see in the server something like ???????

I have placed utf-8 meta tag at the aspx page and I save the file as an encoded-utf8 file.

Hi Friends,

I am using asp to import data from .txt (tab delimited) to SQL Server 2008.

I have found some problem with my code now. ie., some data is not getting read from textfile hence its not inserted into table. But still data present in .txt. I am not sure what will be the cause for this issue. Below is my code.

cnnText.Open "Provider=Microsoft.Jet.OLEDB.4.0;" & _
"Data Source=D:\Sangeetha\commodul\ACDT\UploadFile\;" & _
"Extended Properties=""text;HDR=YES;IMEX=0;FMT=TabDelimited"""

' Load ADO Recordset with Text Data
Set rstText = Server.CreateObject("ADODB.Recordset")
'rstText.Open "Select * from [" & file_name & "]", cnnText,2,3,adcmdText
rstText.Open "Select * from [" & file_name & "]", cnnText

    Set rstAccess = Server.CreateObject("ADODB.Recordset")
    rstAccess.Open "select * from CReport", connection, 2,3

     Do Until rstText.EOF
        With rstAccess
          'if not(isnull(rstText.Fields("reporting_date"))) then
             .AddNew
              .Fields("credit_group").Value =  rstText.Fields.Item("credit_group")
              .Fields("credit_group_aig_number").Value =  rstText.Fields.Item("credit_group_aig_number")
              .Fields("credit_group_gdr_id").Value =  rstText.Fields.Item("credit_group_gdr_id")'new
              .Fields("credit_group_domicile_code").Value =  rstText.Fields.Item("credit_group_domicile_code")
              .Fields("credit_group_domicile").Value =  rstText.Fields.Item("credit_group_domicile")

              rstText.MoveNext
          'else
            'rstText.MoveNext
          'end if
          End With
    Loop
      rstAccess.UpdateBatch

I have tried by keeping IMEX as 1. Only for some of the columns this problem is happening. Eg:

credit_group_aig_number

is a column where for some row records is getting read and for some row this col value its not at all reading from connector. I tried with Response.Write, no value is printing even that row is having value in text file.

I have noticed that column has input of 9 digit id which starts with number as well as alphabet. Only where its start with alphabet this is problem.

Kindly help.

Thanks,

Hi,

I am working on an aspx file which uses css. It displays fine in IE but not in Safari, Chrome, Firefox etc. I am trying to get my head around it but all in vain..
When it get displayed in other browsers all the li jumps to the right only displaying only half of each li.
What i think is the width(eg : width :67px for li.studylink a:active) given in the css is not being identified by other browsers.

It would be very helpful if someone could help me sort it out. I am posting my html contents and css which doesn't gets displayed right.

Thanks in advance.
Payal

CSS
----

.HeaderMenu ul {float:right;height:20px;font-size:6pt;padding-top:2px;}
.HeaderMenu li {display:inline;font-family:arial,arial,sans-serif;font-size:6pt;height:20px;padding:0 0 0 15px; }
li.studylink a:link, li.studylink a:visited, li.studylink a:active {background-image:URL(/Test/Images/studylinkoff.jpg);background-repeat:no-repeat;background-position:left center;width:67px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%;  }
li.studylink a:hover {background-image:URL(/Test/Images/studylinkon.jpg);background-repeat:no-repeat;background-position:left center;color:#000;text-decoration:none;height:100%; }
li.home a:link, li.home a:visited, li.home a:active {background-image:URL(/Test/Images/home_off.gif);background-repeat:no-repeat;background-position:left center;width:67px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%;  }
li.home a:hover {background-image:URL(/Test/Images/home_on.gif);background-repeat:no-repeat;background-position:left center;color:#000;text-decoration:none;height:100%; }
li.print a:link, li.print a:active, li.print a:visited {background-image:URL(/Test/Images/print_off.gif);background-repeat:no-repeat;background-position:left center;width:80px;vertical-align:middle;padding:6px 5px 7px 23px;color:#000;text-decoration:none;height:100%;  }
li.print a:hover {background-image:URL(/Test/Images/print_on.gif);background-repeat:no-repeat;background-position:left center; color:#000;text-decoration:none;height:100%; }

HTML
------

XML

<table border="0" cellspacing="0" cellpadding="0" width="770" height="70">
                                       <tr>
                                           <td>
                                               <A id="a1" href="/Test/Info/Information/HomePage.aspx" runat="server">
                                               </A><img src="/Test/Images/Head.jpg" border="0">
                                               <div class="HeaderMenu">
                                                   <ul>
                                                       <li class="studylink">
                                                           <a  href="http://www.google.com/" title="Study Link. "></a>
                                                       </li>
                                                       <li class="home">
                                                           <a href="http://www.yahoo.com/" title="Back to the Homepage. "></a>
                                                       </li>
                                                       <li class="print">
                                                           <a href="#" onclick="javascript:print();return false" title="Print this page. "></a>
                                                       </li>
                                                   </ul>
                                               </div>
                                              </td>
                                      </tr>
                                   </table>

modified on Tuesday, August 9, 2011 11:01 PM

I have come across this recently myself, in answer to oyur problem, if it's not too late, you can set margin-left:1%; or however much and that will force the thing back into view, however, a better solution is to force the bullet inside of the LI tag, by default it acts as though it is outside. To do this, put

CSS

li { list-style-position:inside; }

it's completely standard css and works best.

Hope this helps, Ed Smile | :)

Not to sound like I'm a newb (I'm definitely not), but I've been in the process of re-reviewing web dev tools for an upcoming project. In the process I've found a really confusing cross-section of Microsoft solutions. I know that there are definitely differences between them, but some are more clear than others and I certainly couldn't find anything from Microsoft that provides clear direction (no surprise there) on which tools are best for what types of development.

- Visual Studio (ie. ASP.NET) - the "real" MS developers answer to web dev
- Sharepoint Web/Designer - web front-ends to Sharepoint, but also capable of doing much more?
- Expression Studio - Blend, Web, Encoder, Design - obviously some of these tools are based more on the graphic design than functionality, but there is a lot of cross-over here as well
- WebMatrix - the beginner's tool for quick, basic web design?
- Lightswitch - Microsoft's web application tool that, in my opinion, is basically targeted at people that used to build Access-based solutions
- Orchard - Microsoft's "late-to-the-game" answer to DNN?

Obviously one can expect some overlap between solutions when one is targeted at pros (such as VS) and others are targeted at beginners (ie. WebMatrix or Lightswitch). However, there is no less than 6 tools listed above and some of these break down further into individual tools. Does anyone know of anything (from Microsoft or independant) that clearly defines the roles of each of the above? What comments do the knowledgable and experienced users of CP have to contribute on the above list?

Cheers,
Chris

Visual Studio - The tool for professional developers
SharePoint Designer (SPD) - Used for SharePoint customizations. Although it has the legacy of FrontPage it is only really useful for SharePoint customizations and non-development work at that.
Expression Web/Blend/Studio - Very handy for web styling and almost a requirement for Silverlight design work.
Webmatrix - A starter tool for non-devs to not hurt themselves but pass the pain on to real developers.
Lightswitch - Allow the office admin to create applications and convince management they should be in IT and/or they don't need real developers.

I know the language. I've read a book. - _Madmatt

I have a horizontal nav menu defined as a standard `ul` with `li` items. The person who designed the menu used one image per menu item, with the image width fixed to that of the menu item, i.e. for five menu items, we have five different width images. I want a reusable menu that caters for various sets of items, of any width, so I've replaced the fixed width images with a 1 pixel wide slice of the original image, set to `repeat-x`.

However, the images for the selected item (yes, one 'selected' image per menu item as well) have an additional, downward pointing arrow on their underside, as in the image below. How can I include such a little marker on the selected item?

http://imageshack.us/photo/my-images/135/menufk.png/[^]

You could cheat, and it put it in the menu text ► itself ◄.

▲ And remove it when inappropriate, of course. ▼

But that will only work if you're using Unicode.

It always itches for the first week or so.

My Mu[sic]
My Films
My Windows Programs, etc.

I hadn't realized before, though it appears that you can have several background images for a single html element. So, with this in mind and the css pseudo element :hover, this effect can be acheived just using css!

I made 3 images.
downArrow.png - 18x9 pixels, copied from linked image, white pixels made transparent
unselectedBG.png - 1x53pixels, top44 pixels=gradient, bottom 9 pixels transparent
selectedBG.png - as above with different gradient

The trick is to ensure that your element will be high enough to hold the arrow below your content.
Since I don't know of a way to do this, I've simply made the elements 9 pixels higher than the background gradients. When I draw them, the page background color/image shows through. When I draw the down arrow, I simply position it at the very bottom of the element and about 10pixels to the right.

I've used padding to make the li elements high enough, there's bound to be a better way than this.
S.

HTML

<html>
<head>
<style>
li{
	color: white;
	background: url(unselectedbg.png);;
	padding-left: 5px;
	padding-right: 20px;
	display: inline;
	padding-top: 10px;
	padding-bottom: 23px;
}
li:hover{
	color: #7cd554;
	background: url(downArrow.png) no-repeat 10 43, url(selectedbg.png) repeat-x;
	}
</style>
</head>
<body>
	<ul>
		<li>RERPORTS AND SEARCHES</li>
		<li>HELP</li>
	</ul>
</body>
</html>

Thanks, exactly what I was looking for. Didn't know you could position a background image.

Just BTW, what I did in the mean time was just add a coloured underline to the selected image, so repeat was OK.

CSS

h1.fontface {font: 60px/68px 'ScriptinaRegular', Arial, sans-serif;letter-spacing: 0;}
p.style1 {font: 18px/27px 'Scriptina-AlternatesRegular', Arial, sans-serif;}
p.style2 {font: 18px/27px 'ScriptinaRegular', Arial, sans-serif;color:red;}

mainly I am speaking about the 60px/68px and the 18px/27px. I do not recall seeing this before and was not successful in a google search...anyboby?

Chris J
www.redash.org

font-size and line-height

As explained here http://www.quackit.com/html/html_font_code.cfm[^]

modified 1-Aug-19 21:02pm.

Richard,

Thanks a lot for such a great reference. Can you tell me if this is indeed css3 or earlier?

Chris J
www.redash.org

Both individually, as you will know, are CSS1, but combined in this particular manner - CSS2 I am pretty sure of.

modified 1-Aug-19 21:02pm.

Once again thanks Richard!

I did know of them seperately but written together like this was new to me and it just goes to show no matter how many years you do something, there is always a surprise or two to be found.

All the best!

Chris J
www.redash.org

Am confused. What exactly are CMS.
why to create new CMS as their are others already exist like dreamwiever ?

CMS we required to Create because if we have CMS then we can easily customize the things in few minitues of time even after 2-3 Years time back. So if is there any requirement like need to Cutomize the things on Coninuesoly or things are getting changed at that time better to Create CMS to get dynamic output instatntly.

Web content management systems

Main article: Web content management system

A web content management (WCM) system is a CMS designed to simplify the publication of web content to web sites and mobile devices — in particular, allowing content creators to create, submit and manage contents Web Programming Languages or Markup Languages such as HTML or the uploading of files.[1]

Several web-based content management systems exist both in the Open Source and commercial domains.

this is taken from Wiki Content Management Systems[^]

Lobster Thermidor aux crevettes with a Mornay sauce, served in a Provençale manner with shallots and aubergines, garnished with truffle pate, brandy and a fried egg on top and Spam - Monty Python Spam Sketch

I want to center an img (I've noted in my code which one), I've tried the , but that didnt work out. I think I may have to add something in my CSS. I am also trying to get my music player to continue playing the current when the user goes to the next page. I know I have a few bits of extra code, I plan on cleaning that up once I get the webpage up and going.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Starr</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>


<script> 
//Script shows current date

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<small><font color='000000' face='Arial'>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</font></small>")
</script>

 
<div id="body_wrapper">
<div id="container">

	<!-- Start of Page Header -->

	<div id="page_header">
	<h1><span>Photos Site</span></h1>
	</div>
	
	<!-- End of Page Header -->


	<!-- Start of Navigational Menu -->

	<div id="nav_menu">

		<ul>
		<li id="menu1"><a href="main.htm"><span>Mainpage</span></a></li>
		<li id="menu2"><a href="about.htm"><span>About Me</span></a></li>
		<li id="menu3"><a href="travel.htm"><span>Portfolio</span></a></li>
		<li id="menu4"><a href="prices.htm"><span>Kids n Sports</span></a></li>
		<li id="menu5"><a href="services.htm"><span>Africa</span></a></li>
		<li id="menu6"><a href="contact.htm"><span>Contact</span></a></li>
		</ul>

		<div class="clearthis"> </div>
	</div>

	<!-- End of Mavigational Menu -->

	<div class="clearthis"> </div>


	<!-- Start of Welcome to my Site -->

<div id="welcome">

		<div class="content_header">
		<h2><span>Welcome to my Site</span></h2>
		</div>

		<div class="content">

			<div class="thumbnail_dborder_1"><div class="thumbnail_dborder_2"><div class="thumbnail_dborder_3"><div class="thumbnail_dborder_4">

	
			
(This is the img I want centered) <img src="images/welcome_thumbnail.jpg" width="340" height="200" alt="Thumbnail Caption" />

			</div></div></div></div>
<center><h1><marquee behavior="alternate">Welcome</marquee></h1></center><br/><br/><br/>


 <p>Text</p><p>Sample text</p><br /><br />

 <p>Text</p><p>Sample text</p><br /><br />


		</div>

		<div class="clearthis"> </div>
	</div>

	<!-- End of Welcome to my Site -->

	<!-- Start of My Portfolio -->

	<div id="portfolio">

		<div class="content_header">
		<h1><span>My Portfolio</span></h1>
		</div>


		<!-- Start of Gallery -->

		<div id="gallery">

			<ul>
			<li><a href="C:\Documents and Settings\Owner\My Documents\Visual Studio 2008\WebSites\Starr\images\gallery_thumbnail_1.gif"><img src="images/gallery_thumbnail_1.gif" width="84" height="76" alt="Thumbnail 1 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_2.gif" width="93" height="76" alt="Thumbnail 2 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_3.gif" width="59" height="77" alt="Thumbnail 3 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_4.gif" width="137" height="77" alt="Thumbnail 4 Caption" /></a></li>
			<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_5.gif" width="119" height="78" alt="Thumbnail 5 Caption" /></a></li>
			</ul>

		</div>

		<!-- End of Gallery -->


		<div class="clearthis"> </div>

	</div>

	<!-- End of Client List -->


</div>
</div>


<!-- Start of Page Footer -->

<div id="page_footer">
Web design by <a href
="http://www.freewebsitetemplates.com/">Free Website Templates</a><br/><br/><br/>

//music player
<embed name="musicplaylist"
src="musicplaylist.m3u"
width="300"
height="26"
loop="true"
hidden="false"
autostart="true">
</embed>

<br /><br /><center>Starr © 2011</center>

</div>

<!-- End of Page Footer -->
</body>
</html>

My style sheet

CSS

* {
	margin: 0px;
	padding: 0px;
}

body {
	padding: 80px 0px 0px;
	background: url('images/background_top.gif') #c4b8a1 repeat-x;
	color: #695d47;
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
	text-align: center;
}

a {
	color: #695d47;
	background-color: inherit;
	text-decoration: underline;
}

a:hover {
	color: #ab9c7e;
	background-color: inherit;
}
span {
	display: none;
}

img {
	
	border: none;
}

ul {
	list-style-type: none;
}

li {
	list-style-type: none;
}

p {
	margin: 0px 0px 15px;
	text-align: justify;
	line-height: 15px;
}

.clearthis {
	margin : 0px;
	height : 1px;
	clear : both;
	float : none;
	font-size : 1px;
	line-height : 0px;
	overflow : hidden;
	visibility: hidden;
}


#body_wrapper {
	padding: 5px 0px 10px;
	width: 100%;
	background-color: #fff;
	color: inherit;
}

#container {
	margin: 0px auto;
	width: 758px;
	text-align: right;
}

#container .content_header {
	margin: 20px 0px 0px auto;
	width: 730px;
	height: 40px;
	background: url('images/content_header_bg.gif') repeat-x 0% 0%;
}

#container .content {
	margin: 3px 150px 0px 28px;
	width: 580px;
	text-align: left;
}


/* Page Header */

#page_header {
	background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
	color: #6a604e;
	float: left;
}

#page_header h1 {
	width: 280px;
	height: 125px;
	overflow: hidden;
	background: url('images/website_title.gif') no-repeat 50% 50%;
}


/* Navigational Menu */

#nav_menu {
	margin-left: 9px;
	padding-left: 19px;
	float: right;
	background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
	color: #b3a386;
	text-align: center;
	font-family: tahoma, arial, sans-serif;
}

#nav_menu a {
	color: #b3a386;
	background: inherit;
}

#mav_menu a:hover {
	color: #857860;
	background: inherit;
}

#nav_menu ul {
	width: 450px;
	height: 125px;
	overflow: hidden;
}

#nav_menu li {
	float: left;
	border-width: 0px 1px 1px 0px;
	border-color: #c1b7a5;
	border-style: solid;
	font-size: 20px;
}

#nav_menu li#menu3, #nav_menu li#menu6 {
	border-right: none;
}

#nav_menu li a {
	display: block;
	width: 149px;
	height: 62px;
	text-decoration: none;
}

#nav_menu li a:hover {
	color: #857860;
	background-color: #f4eee2
}

#nav_menu li a span {
	padding-top: 17px;
	display: block;
}


/* Welcome to my Site */

#welcome .content_header h2 {
	height: 28px;
	background: url('images/welcome_header.gif') no-repeat 0% 0%;
}

#welcome p {
	width: 420px;
	float: right;
}


/* Client List */

#clientlist .content {
	margin-top: 18px;
	margin-right: 260px;
	width: 470px;

}

#clientlist .content_header h1 {
	height: 28px;
	background: url('images/clientlist_header.gif') no-repeat 0% 0%;
}

#clientlist p {
	width: 300px;
	float: right;
}

#photographer_image {
	width: 758px;
	text-align: left;
	overflow: hidden;
}

#photographer_image span {
	display: block;
	margin-top: -269px;
	margin-left: 517px;
	width: 241px;
	height: 300px;
	background: url('images/main_image.gif') no-repeat 0% 0%;
	z-index: 1;
	position: absolute;
}


/* My Portfolio */


#portfolio .content_header h1 {
	height: 28px;
	background: url('images/portfolio_header.gif') no-repeat;
}

#portfolio {
	padding-bottom: 12px;

	background: url('images/gallery_title.gif') no-repeat 29px 80px;
}

#gallery {
	padding: 40px 0px 25px 59px;
}

#gallery ul {
	width: 700px;
}

#gallery li {
	margin-right: 30px;
	margin-bottom: 25px;
	padding: 4px 4px 2px;
	background-color: #c4b8a1;
	color: inherit;
	float: left;
}


/* Page Footer */

#page_footer {
	padding: 9px 10px 6px;
	font-weight: bold;
	float: none;
	clear: both;
}

#page_footer a:hover {
	background-color: inherit;
	color: #4f4635;
}



/* Thumbnail with Double-Border */

.thumbnail_dborder_1 {
	margin: 0px 12px 5px 0px;
	background: url('images/thumbnail_border_1.gif') #695d47 no-repeat 0% 0%;
	color: inherit;
	clear: left;
	float: left;
}

.thumbnail_dborder_2 {
	background: url('images/thumbnail_border_1.gif') no-repeat 100% 0%;
}

.thumbnail_dborder_3 {
	background: url('images/thumbnail_border_1.gif') no-repeat 100% 100%;
}

.thumbnail_dborder_4 {
	padding: 4px 4px 3px;
	background: url('images/thumbnail_border_1.gif') no-repeat 0% 100%;
}

.thumbnail_dborder_1 img {
	border: #fff 7px solid;
}


/* Thumbnail with Single-Border */

.thumbnail_border_1 {
	margin: 5px 12px 5px 0px;
	background: url('images/thumbnail_border_2a.gif') #c5b9a2 no-repeat 0% 0%;
	color: inherit;
	clear: left;
	float: left;
}

.thumbnail_border_2 {
	background: url('images/thumbnail_border_2b.gif') no-repeat 100% 0%;
}

.thumbnail_border_3 {
	background: url('images/thumbnail_border_2c.gif') no-repeat 100% 100%;
}

.thumbnail_border_4 {
	padding: 4px 4px 3px;
	background: url('images/thumbnail_border_2d.gif') no-repeat 0% 100%;
}

Putting this line in your css file makes the image you have centered in the div you have the image contained in.

CSS

img {   display: block;   margin-left: auto;   margin-right: auto; }.

. This is quick and dirty and may not work exactly with the rest of your page. Add this to your css file to see all the div's you may want to re-think:

CSS

* { border: 1px solid red !important; }

. You will have to size your div like the ones near the bottom of the page (list) if you want this image centered on the page as those are.

I tried this without your "This is the img I want centered" text removed so I could view the img centered. If you have other images you will have to add an "id" or a class name to the image so it applies to only the one you want. See the W3Schools page for good instructions on css and Html. Smile | :)

(First reply so formatting may not be up to snuff in text above.)

vbmike